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Avant-propos 



La nouvelle version de Flash est sortie depuis peu. Passant de Flash 8 a Flash CS3, le 
langage de programmation propose par la derniere version devient 1'ActionScript 3.0 ou 
AS3. Cet ouvrage est entierement dedie a l'apprentissage de l'AS3. II va vous permettre 
de decouvrir une nouvelle fagon de programmer, plus simple et plus efficace. 

Organisation de l ouvrage 

Ce livre est tout particulierement destine aux debutants qui souhaitent aborder l'appren- 
tissage de la programmation en utilisant le langage ActionScript comme premier 
langage. 

Les concepts fondamentaux de la programmation y sont presentes de fagon evolutive. 
Chaque chapitre propose un cours theorique illustre d'exemples concrets et utiles pour le 
developpement d' animations Flash. La syntaxe du langage est decrite avec precision et 
les exemples ont ete choisis arm d'aborder de fagon tres pratique les algorithmes fonda- 
mentaux de la programmation ou encore pour examiner un point precis sur une technique 
de programmation specifique a 1' animation ou au langage ActionScript. 

Le chapitre introductif, « A la source d'un programme », constitue le prealable neces- 
saire a la bonne comprehension des chapitres suivants. II introduit les mecanismes de 
construction d'un algorithme, compte tenu du fonctionnement interne de l'ordinateur. 
II explique egalement les notions de langage informatique, de developpement de scripts 
et d' execution a travers un exemple de programme ecrit en ActionScript. 

• Le chapitre 1, « Traiter les donnees », aborde la notion de variables et de types. 
II decrit comment stacker une donnee en memoire, calculer des expressions mathema- 
tiques ou echanger deux valeurs. Le cahier des charges du projet mini site est defini a 
la fin de ce chapitre. 

• Le chapitre 2, « Les symboles », aborde la notion de symbole sous Flash. II decrit les 
trois formes fondamentales de symboles : les clips, les boutons et les graphiques. 
II presente egalement comment les creer et les manipuler par programme. II explique 
enfin comment utiliser les objets de type Shape et Sprite, les nouvelles classes poids 
plume de l'AS3. 

• Le chapitre 3, « Communiquer ou interagir », montre comment transmettre des 
valeurs a l'ordinateur par 1' intermediate du clavier et indique comment l'ordinateur 
fournit des resultats en affichant des messages a l'ecran. Pour cela, il examine avec 
precision la notion d'evenement et de gestionnaires d'evenements. 
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• Le chapitre 4, « Faire des choix », explique comment tester des valeurs et prendre des 
decisions en fonction du resultat. II traite de la comparaison de valeurs ainsi que de 
1' arborescence de choix. 

• Le chapitre 5, « Faire des repetitions », est consacre a l'etude des outils de repetition 
et d'iteration. II aborde les notions decrementation et montre comment positionner 
automatiquement des objets sur la scene. 

• Le chapitre 6, « Collectionner des objets », concerne 1' organisation des donnees sous 
forme de tableaux. 

• Le chapitre 7, « Les fonctions », decrit tres precisement comment manipuler les fonc- 
tions et leurs parametres. II definit les termes de variable locale et globale. II explique 
le passage de parametres par valeur ainsi que le passage de parametres par reference. 

• Le chapitre 8, « Les classes et les objets », definit a partir de l'etude de la classe Date 
ce que sont les classes et les objets dans le langage ActionScript. II expose ensuite 
comment definir de nouvelles classes et construire des objets propres a 1' application 
developpee. 

• Le chapitre 9, « Les principes du concept objet », developpe plus particulierement les 
differentes notions liees a 1' utilisation de classes. II decrit ensuite les principes fonda- 
teurs de la notion d'objet, c'est-a-dire 1' encapsulation des donnees (protection et 
controle des donnees, constructeur de classe) ainsi que l'heritage entre classes. 

• Le chapitre 10, « Le traitement de donnees multimedia », presente les differents outils 
permettant 1' importation dynamique de donnees telles que le son, la video, le texte 
ainsi que les fichiers au format XML. 

A la fin de chaque chapitre, vous trouverez une section : 

• « Memento » qui resume et releve les points importants a retenir. 

• « Exercices » qui vous permettra de revoir les notions theoriques abordees au cours du 
chapitre et de parfaire votre pratique de la programmation. Certains exercices sont 
repris d'un chapitre a 1' autre, avec pour objectif de rendre, a chaque fois, les applications 
plus conviviales et/ou plus completes. 

• « Le projet mini site ». Cette section est a suivre et a realiser tout au long de la lecture 
de l'ouvrage. Elle vous permettra de construire une application de plus grande enver- 
gure que celles proposees en exercices. 



Extension web 

Vous trouverez sur le site web des editions Eyrolles, tous les exemples du livre, les corriges des exer- 
cices etdu projet mini site ainsi qu'une mise a jouret les errata. Rendez-vous sur la fiche de l'ouvrage 
s u r http://www. editions-eyrolles. com. 
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Introduction 



A la source d'un programme 



Aujourd'hui, l'ordinateur est un objet courant qui est aussi bien capable d'imprimer les 
factures des clients d'un magasin d'outillage que d'analyser des molecules chimiques 
tres complexes. 

Bien evidemment, ce n'est pas la machine-ordinateur en tant que telle qui possede toutes 
ces facultes, mais les applications ou encore les logiciels installes sur celle-ci. Pour emet- 
tre une facture, l'utilisateur doit faire appel a une application specifique de facturation. 
Pour etudier des molecules, les chercheurs utilisent des logiciels scientifiques tres elabores. 

Un ordinateur sans programme n'a aucune utilite. Seul le programme fait de l'ordinateur 
un objet « intelligent », traitant l'information de facon a en extraire des valeurs pertinentes 
selon son objectif final. 

Ainsi, creer un programme, une application, c'est apporter de l'esprit a l'ordinateur. Pour 
que cet esprit donne sa pleine mesure, il est certes necessaire de bien connaitre le langage 
des ordinateurs, mais surtout, il est indispensable de savoir programmer. La programma- 
tion est l'art d'analyser un probleme afin d'en extraire la marche a suivre, l'algorithme 
susceptible de resoudre ce probleme. 

C'est pourquoi ce chapitre commence par aborder la notion d'algorithme. A partir d'un 
exemple, tire de la vie courante, nous determinerons les etapes essentielles a 1' elabora- 
tion d'un programme (« Construire un algorithme »). A la section suivante, « Qu'est-ce 
qu'un ordinateur ? », nous examinerons le role et le fonctionnement de l'ordinateur dans 
le passage de 1' algorithme au programme. Nous etudierons ensuite, a travers un exemple 
simple, comment ecrire un programme en ActionScript 3.0 et comment l'executer (« Un 
premier programme en ActionScript 3.0 »). 

Enfin, dans la section « L'environnement de programmation Flash », nous donnons un 
apercu detaille de l'interface Flash CS3, base necessaire pour ecrire des programmes en 
ActionScript 3.0. 
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Construire un algorithme 

Un programme est ecrit avec 1' intention de resoudre une problematique telle que stacker 
des informations relatives a un client, imprimer une facture ou encore calculer des statis- 
tiques afin de prevoir le temps qu'il fera dans 2, 3 ou 5 jours. 

Un ordinateur sait calculer, compter, trier ou rechercher 1' information dans la mesure ou 
un programmeur lui a donne les ordres a executer et la marche a suivre pour arriver au 
resultat. 

Cette demarche s'appelle un « algorithme ». 

Determiner un algorithme, c'est trouver un cheminement de taches a fournir a l'ordinateur 
pour qu'il les execute. Voyons comment s'y prendre pour le construire. 

Ne faire qu'une seule chose a la fois 

Avant de realiser une application concrete, telle que celle proposee en projet dans cet 
ouvrage (voir chapitre 1 « Traiter les donnees », section « Le projet mini site »), neces- 
sairement complexe par la diversite des actions qu'elle doit realiser, simplifions-nous la 
tache en ne cherchant a resoudre qu'un probleme a la fois. 

Considerons que creer une application, c'est decomposer cette derniere en plusieurs 
sous-applications qui, a leur tour, se decomposent en micro-applications, jusqu'a descen- 
dre au niveau le plus elementaire. Cette demarche est appelee « analyse descendante ». 
Elle est le principe de base de toute construction algorithmique. 

Pour bien comprendre cette demarche, penchons-nous sur un probleme reel et simple a 
resoudre : « Comment cuire un oeuf a la coque ? ». 

Exemple : I 'algorithme de I'ceuf a la coque 

Construire un algorithme, c'est avant tout analyser l'enonce du probleme arm de definir 
l'ensemble des objets a manipuler pour obtenir un resultat. 

Definition des objets manipules 

Analysons l'enonce suivant : 

Comment cuire un suf a la coque ? 

Chaque mot a son importance. Ainsi, « a la coque » est aussi important que « oeuf ». 
Le terme « a la coque » implique que Ton doit pouvoir mesurer le temps avec precision. 

Notons que tous les ingredients et ustensiles necessaires ne sont pas cites dans l'enonce. 
En particulier, nous ne savons pas si nous disposons d'une plaque de feu au gaz ou a 
l'electricite. Pour resoudre notre probleme, nous devons prendre certaines decisions. 
Ces dernieres vont avoir une influence sur 1' allure generale de notre algorithme. 

Supposons que pour cuire notre oeuf nous soyons en possession des ustensiles et ingredients 
suivants : 

casserol e 

plaque electrique 

eau 

(EUf 

coquetier 
minuteur 
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el ectri cite 
table 
cuillere 

En fixant la liste des ingredients et des ustensiles, nous definissons un environnement, 
une base de travail. Nous sommes ainsi en mesure d'etablir une liste de toutes les actions 
a mener pour resoudre le probleme, et de construire la marche a suivre permettant de 
cuire notre ceuf. 

Liste des operations 

Verser 1 'eau dans la casserole, faire bouillir l'eau. 

Prendre la casserole, l'<Euf, de l'eau, le minuteur, le coquetier, la cuillere. 
Allumer ou eteindre la plaque electrique. 
Attendre que le minuteur sonne. 
Mettre le minuteur sur 3 minutes. 

Poser la casserole sur la plaque, le coquetier, le minuteur sur la table, 1'iEuf dans 
*-la casserole, 1 "ceuf dans le coquetier. 

Cette enumeration est une description de toutes les actions necessaires a la cuisson d'un 
ceuf. 

Chaque action est un fragment du probleme donne et ne peut plus etre decoupee. Chaque 
action est elementaire par rapport a 1' environnement que nous nous sommes donne. 

En definissant 1' ensemble des actions possibles, nous creons un langage minimal qui 
nous permet de cuire l'oeuf. Ce langage est compose de verbes (Prendre, Poser, Verser, 
Faire, Attendre...) et d'objets ((Euf, Eau, Casserole, Coquetier...). 

La taille du langage, c'est-a-dire le nombre de mots qu'il renferme, est determinee par 
P environnement. Pour cet exemple, nous avons, en precisant les hypotheses, volontai- 
rement choisi un environnement restreint. Nous aurions pu decrire des taches comme 
« prendre un contrat d'acces a Penergie electrique » ou « elever une poule pondeuse », 
mais elles ne sont pas utiles a notre objectif pedagogique. 



Question 

Quelle seraitla liste des operations si I'on decidait de faire un ceuf poche ? 
Reponse 

Les operations seraient : 

Prendre du sel , du vinaigre, une assiette. 
Verser le sel, le vinaigre dans l'eau. 
Casser l'oeuf et le verser dans l'eau. 
Retirer 1 '<Euf avec la cuillere. 

II est inutile de prendre un coquetier. 



Ordonner la liste des operations 

Telle que nous P avons decrite, la liste des operations ne nous permet pas encore de faire 
cuire notre ceuf. En suivant cette liste, tout y est, mais dans le desordre. Pour realiser cette 
fameuse recette, nous devons ordonner la liste. 

1. Prendre une casserole. 

2. Verser l'eau du robinet dans la casserole. 

3. Poser la casserole sur la plaque electrique. 
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4. 


Allumer la plaque electrique. 


5. 


Faire bouillir 1 'eau. 


6. 


Prendre 1 'ceuf. 


7. 


Placer 1 'oeuf dans la casserole. 


8. 


Prendre le minuteur. 


9. 


Mettre le minuteur sur 3 minutes. 


10. 


Prendre un coquetier. 


11. 


Poser le coquetier sur la table. 


12. 


Attendre que le minuteur sonne. 


13. 


Eteindre la plaque electrique. 


14. 


Prendre une cuillere. 


15. 


Retirer 1 'ceuf de la casserole a 1'aide de la cuillere 


16. 


Poser l'ffiuf dans le coquetier. 



L' execution de l'ensemble ordonne de ces taches nous permet maintenant d'obtenir un 
oeuf a la coque. 



Remarque 

L'ordre d'execution de cette marche a suivre est important. En effet, si I'utilisateur realise I'operation 12 
(Attendre que le minuteur sonne) avant I'operation 9 (Mettre le minuteur sur 3 minutes), le resultat est 
sensiblement different. La marche a suivre ainsi desordonnee risque d'empecher la bonne cuisson de 
notre oeuf. 



Cet exemple tire de la vie courante montre que pour resoudre un probleme, il est essentiel de 
definir les objets utilises, puis de trouver la suite logique de tous les ordres necessaires a 
la resolution dudit probleme. 



Question 

Ou placer les operations supplemental, dans la liste ordonnee, pour faire un ceuf poche ? 
Reponse 

Les operations s'inserent dans la liste precedente de la facon suivante : 
Entre les lignes 3 et 4, 

Prendre le sel et le verser dans l'eau. 
Prendre le vinaigre et le verser dans l'eau. 

remplacer la ligne 7 par : 

Casser 1 'ceuf et le verser dans l'eau. 

remplacer les lignes 10 et 11 par : 

Prendre une assiette. 

Poser 1 'assiette sur la table. 

remplacer la ligne 16 par : 

Poser 1 'ceuf dans l'assiette. 



Vers une methode 

La tache consistant a decrire comment resoudre un probleme n'est pas simple. Elle 
depend en partie du niveau de difficulte du probleme et reclame un savoir-faire : la fagon 
de proceder pour decouper un probleme en actions elementaires. 



A la source d'un programme I 
Introduction | 

Pour aborder dans les meilleures conditions possibles la tache difficile d' elaboration d'un 
algorithme, nous devons tout d'abord : 

• determiner les objets utiles a la resolution du probleme ; 

• construire et ordonner la liste de toutes les actions necessaires a cette resolution. 
Pour cela, il est necessaire : 

• d' analyser en detail la tache a resoudre ; 

• de fractionner le probleme en actions distinctes et elementaires. 

Ce fractionnement est realise en tenant compte du choix des hypotheses de travail. Ces 
hypotheses imposent un ensemble de contraintes qui permettent de savoir si Taction 
decrite est elementaire et peut ne plus etre decoupee. 

Cela fait, nous avons construit un algorithme. 

Et du point de vue de I'objet... 

La programmation et par consequent 1' elaboration des algorithmes sous-jacents, s'effectuent 
aujourd'hui en mode objet. 

II s'agit toujours de construire des algorithmes et d'elaborer des marches a suivre, mais 
avec pour principe fondamental d'associer les actions (decrites dans la liste des opera- 
tions) aux objets (definis dans la liste des objets manipules) de facon beaucoup plus 
stricte qu'en simple programmation. 

Ainsi, une action est definie pour un type d'objet. 

Reprenons par exemple le minuteur dans la liste des objets utilises pour cuire notre ceuf a 
la coque. En programmation objet, la liste des operations concernant le minuteur peut 
s'ecrire : 

Minuteur_prendre 
Minuteur_initial iser 
Minuteur_sonner 

Les termes prendre, initialiser et sonner representent des blocs d' instructions qui decri- 
vent comment realiser Taction demandee. Ces actions sont accomplies uniquement si 
elles sont appliquees a Tobjet minuteur. Ainsi, par exemple, Tinstruction <euf_sonner ne 
peut etre une instruction valide, car Taction sonner n'est pas definie pour Tobjet oeuf. 

Grace a ce principe, associer des actions a des objets, la programmation objet garantit 
Texactitude du resultat fourni, en realisant des traitements adaptes aux objets. 



Passer de I'algorithme au programme 

Pour construire un algorithme, nous avons defini des hypotheses de travail, c'est-a-dire 
suppose une base de connaissances minimales necessaires a la resolution du probleme. 
Ainsi, le fait de prendre Thypothese d' avoir une plaque electrique nous autorise a ne pas 
decrire T ensemble des taches consistant a allumer le gaz avec une allumette. C'est done 
la connaissance de Tenvironnement de travail qui determine en grande partie la construction 
de T algorithme. 
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Pour passer de l'algorithme au programme, le choix de l'environnement de travail n'est 
plus de notre ressort. Jusqu'a present, nous avons suppose que l'executant etait humain. 
Maintenant, notre executant est l'ordinateur. Pour ecrire un programme, nous devons 
savoir ce dont est capable un ordinateur et connaitre son fonctionnement de facon a 
etablir les connaissances et capacites de cet executant. 

Qu'est-ce qu'un ordinateur ? 

Notre intention n'est pas de decrire en detail le fonctionnement de l'ordinateur et de ses 
composants, mais d'en donner une image simplified. 

Pour tenter de comprendre comment travaille l'ordinateur et, surtout, comment il se 
programme, nous allons schematiser a l'extreme ses mecanismes de fonctionnement. 

Un ordinateur est compose de deux parties distinctes : la memoire centrale et 1' unite centrale. 

La memoire centrale permet de memoriser toutes les informations necessaires a l'execution 
d'un programme. Ces informations correspondent a des « donnees » ou a des ordres a 
executer (« instructions »). Les ordres places en memoire sont effectues par l'unite 
centrale, la partie active de l'ordinateur. 

Lorsqu'un ordinateur execute un programme, son travail consiste en grande partie a gerer 
la memoire, soit pour y lire une instruction, soit pour y stacker une information. En ce 
sens, nous pouvons voir l'ordinateur comme un robot qui sait agir en fonction des ordres 
qui lui sont fournis. Ces actions, en nombre limite, sont decrites ci-dessous. 

Deposer ou lire une information dans une case memoire 

La memoire est formee d' elements, ou cases, qui possedent chacune un numero (une 
adresse). Chaque case memoire est en quelque sorte une boite aux lettres pouvant conte- 
nir une information (une lettre). Pour y deposer cette information, l'ordinateur (le 
facteur) doit connaitre 1' adresse de la boite. Lorsque le robot place une information dans 
une case memoire, il memorise 1' adresse ou celle-ci se situe afin de retrouver 1' information 
le moment venu. 

Figure 1-1 



La memoire de 
I 'ordinateur est 
composee de cases 
possedant une 
adresse et pouvant 
contenir d tout 
moment une valeur. 




A la source d'un programme 

Introduction 




Le robot sait deposer une information dans une case, mais il ne sait pas la retirer (au sens 
de prendre un courrier depose dans une boite aux lettres). Lorsque le robot prend l'infor- 
mation deposee dans une case memoire, il ne fait que la lire. En aucun cas il ne la retire 
ni ne l'efface. L'information lue reste toujours dans la case memoire. 



Remarque 

Pour effacer une information d'une case memoire, il est necessaire de placer une nouvelle information dans 
cette meme case. Ainsi, la nouvelle donnee remplace I'ancienne et l'information precedente est detruite. 



Executer des operations simples telles que I'addition ou la soustraction 

Le robot lit et execute les operations dans l'ordre ou elles lui sont fournies. Pour faire une 
addition, il va chercher les valeurs a additionner dans les cases memoire appropriees 
(stockees, par exemple, aux adresses a et b) et realise ensuite 1' operation demandee. 
II enregistre alors le resultat de cette operation dans une case d'adresse c. De telles operations 
sont decrites a l'aide d'ordres, appeles aussi « instructions ». 

Figure 1-2 

Le programme execute 
les instructions 
dans I 'ordre de leur 
apparition. 



Comparer des valeurs 

Le robot est capable de comparer deux valeurs entre elles pour determiner si l'une est 
plus grande, plus petite, egale ou differente de l'autre valeur. Grace a la comparaison, le 
robot est capable de tester une condition et d' executer un ordre plutot qu'un autre, en 
fonction du resultat du test. 

Figure 1-3 

Suivant le resultat 
du test, I'ordinateur 
execute l'une ou l'autre 
des instructions en 
sautant celle qu 'il 
ne doit pas executer. 




Programme 

Lire a au clavier 

Si a vaut 5 

c = a + 1 < 
Sinon 
c=a-1 < 

Afficher c 



a vaut-il 5 ? 
oui 
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La realisation d'une comparaison ou d'un test fait que le robot ne peut plus executer les 
instructions dans leur ordre d' apparition. En effet, suivant le resultat du test, il doit 
rompre l'ordre de la marche a suivre, en sautant une ou plusieurs instructions. C'est pour- 
quoi il existe des instructions particulieres dites de « branchement ». Grace a ce type 
d' instructions, le robot est a meme non seulement de sauter des ordres, mais aussi de 
revenir a un ensemble d' operations arin de les repeter. 

Communiquer une information elementaire 

Un programme est essentiellement un outil qui traite l'information. Cette information est 
transmise a l'ordinateur par l'utilisateur. L'information est saisie par 1' intermediate du 
clavier ou de la souris. Cette transmission de donnees a l'ordinateur est appelee 
« communication en entree » (input en anglais). On parle aussi de « saisie » ou encore de 
« lecture » de donnees. 

Apres traitement, le programme fournit un resultat a l'utilisateur, soit par l'interme- 
diaire de l'ecran, soit sous forme de fichiers que Ton peut ensuite imprimer. II s'agit 
alors de communication en sortie (output) ou encore « d'affichage » ou « d'ecriture » 
de donnees. 



Figure 1-4 

La saisie au clavier 
d'une valeur 
correspond a une 
operation d' entree 
et I 'affichage 
d'un resultat a une 
operation de sortie. 




Coder l'information 

De par la nature de ses composants electroniques, le robot ne percoit que deux etats : 
composant allume et composant eteint. De cette perception decoule le langage binaire 
qui utilise par convention les deux symboles 0 (eteint) et 1 (allume). 

Ne connaissant que le 0 et le 1 , l'ordinateur utilise un code pour representer une informa- 
tion aussi simple qu'un nombre entier ou un caractere. Le codage s'effectue a l'aide d'un 
programme qui differencie chaque type d'information (donnee numerique ou alpha- 
betique) et le transforme en valeurs binaires. A l'inverse, ce programme sait aussi trans- 
former un nombre binaire en valeur numerique ou alphabetique. II existe autant de codes 
que de types d'informations. Cette differentiation du codage (en fonction de ce qui doit 
etre represents ) introduit le concept de « type » de donnees. 



A la source d'un programme 




Introduction 



Remarque 

Toute information fournie a I'ordinateur est, au boutdu compte, codee en binaire. information peutetre 
un simple nombre ou une instruction de programme. 



Lordinateur n'est qu'un executant 

En pratique, le robot est tres habile a realiser l'ensemble des taches enoncees ci-dessus. 
II les execute beaucoup plus rapidement qu'un etre humain. 

En revanche, le robot n'est pas dote d' intelligence. II n'est ni capable de choisir une 
action plutot qu'une autre, ni apte a executer de lui-meme l'ensemble de ces actions. 
Pour qu'il puisse executer une instruction, il faut qu'un etre humain determine l'instruction 
la plus appropriee et lui donne l'ordre de 1' executer. 

Le robot est un executant capable de comprendre des ordres. Compte tenu de ses capacites 
limitees, les ordres ne peuvent pas lui etre donnes dans le langage naturel propre a l'etre 
humain. En effet, le robot ne comprend pas le sens des ordres qu'il execute mais seule- 
ment leur forme. Chaque ordre doit etre ecrit avec des mots particuliers et une forme, ou 
syntaxe, preetablie. L'ensemble de ces mots constitue un langage informatique. Les 
langages C, C++, Pascal, Basic, Fortran, Cobol, Java et ActionScript sont des langages de 
programmation, constitues de mots et d'ordres dont la syntaxe differe selon le langage. 

Pour ecrire un programme, il est necessaire de connaitre un de ces langages, de facon a 
traduire un algorithme en un programme compose d'ordres. 



Flash est un logiciel concu avant tout pour developper des applications graphiques. II est 
surtout utilise pour produire des documents composes d' animations plus ou moins 
complexes, destines a la diffusion sur Internet. 

A partir de la version MX 2004, Flash est dote d'un veritable langage de programmation, 
1'ActionScript 2. Aujourd'hui, avec Flash CS3, le langage de programmation est l'AS3 
- ActionScript 3.0 - avec lequel il devient possible de construire des applications 
completes et legeres, de la simple presentation d'exposes, a la mise en place d'un 
programme integrant des bases de donnees sur une architecture client-serveur, en passant 
par la creation de jeux off-line ou on-line. 



Figure 1-5 



// existe autant de 
codes que de types 
d 'informations. 



Toute information 
est codee en binaire. 




Qu est ce qu'un programme en Flash ? 
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La puissance de Flash reside surtout dans sa facilite a meler les images concues par des 
graphistes avec des instructions de programmation tres elaborees. Grace a cela, program- 
meurs et graphistes ont la possibility de creer tres rapidement des applications conviviales, 
legeres en poids et reactives aux actions de l'utilisateur. 

Pour creer une application en ActionScript 3.0, nous allons avoir a decrire une liste 
ordonnee d'operations dans ce langage. La contrainte est de taille et porte essentielle- 
ment sur la facon de definir et de representer les objets necessaires a la resolution du 
probleme en fonction des instructions disponibles dans ce langage. 

Pour bien comprendre la difficulte du travail a accomplir, examinons plus precisement les 
differentes etapes de realisation d'une petite animation interactive. 



Quelles operations pour creer une animation ? 

Pour cette premiere realisation, nous allons creer une animation qui lance une bulle de 
savon vers le haut de I'ecran, lorsque l'utilisateur clique sur un bouton d'envoi. La bulle 
revient a sa position initiale, lorsqu'elle sort de I'ecran. La bulle est relancee en cliquant 
a nouveau sur le bouton d'envoi. 



Figure I-6 

Lorsque l'utilisa- 
teur clique sur le 
bouton Lancer, la 
bulle se deplace 
vers le haut de 
I'ecran. 




Definir les objets utiles a I'animation 

L'exercice consiste a lancer une bulle de savon lorsque l'utilisateur clique sur un bouton 
d'envoi. Deux objets graphiques sont done necessaires a la realisation de cette animation : la 
bulle de savon et le bouton de lancement. 

t5= Pour en savoir plus 

Si vous ne savez pas utiliser les outils de dessin proposes par Flash, vous trouverez le fichieranimBulle.fi a 
contenantces elements graphiques, dans le repertoire Exemples/lntroduction (cf. extension web). 



Figure I-7 

Une bulle de savon 
et un bouton 
de lancement 
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Une fois dessines, ces objets doivent etre transformes en symboles de type Clip ou 
Bouton, afin d'etre considered par Flash comme des objets utilisables par un programme 
ecrit en ActionScript 3.0. 

Pour cela, vous devez : 

• selectionner l'integralite du bouton et taper sur la touche F8 (PC et Mac). Apparait 
alors une boite de dialogue (voir figure 1-8 ci-apres) qui vous permet de donner un 
nom et un comportement (clip, bouton ou graphique) a l'objet selectionne. Pour le 
bouton d'envoi, nommez-le Bouton et selectionner le comportement Bouton. 

• proceder de la meme facon pour la bulle et donner le nom Bui 1 e avec le comportement 
Clip. 



Figure 1-8 

Convertir le dessin 
du bouton d'envoi 
en un symbole de 
type Bouton 




ds= Pour en savoir plus 

La notion de symbole est une notion cle pour la programmation en ActionScript. E I le est etudiee de fagon 
plus detaillee au chapitre 2, « Les symboles ». 

Decrire les operations necessaires a I'animation 

Pour realiser I'animation demandee, nous avons a effectuer un certain nombre d' operations 
telles que : 

Placer la bulle et le bouton sur la scene. 
Detecter un clic de souris sur le bouton. 
Deplacer la bulle de savon vers le haut. 
Examiner la position de la bulle. 
Observer si la bulle ne sort pas de l'ecran. 
Placer la bulle a sa position initiale. 

Ces operations s'enchainent selon un ordre bien precis. Par exemple, la bulle ne peut se 
deplacer si l'utilisateur n'a pas encore clique sur le bouton d'envoi, I'animation ne 
s'arrete que lorsque la bulle sort de la fenetre... Concretement, pour construire cette 
animation, nous devons realiser les operations dans 1' ordre suivant : 

1. Centrer le bouton d'envoi en bas de l'ecran. 

2. Centrer la bulle de savon en la placant un peu au-dessus du bouton d'envoi. 

3. Attendre un clic sur le bouton d'envoi. 

4. Lorsqu'un clic est detecte, deplacer la bulle vers le haut de l'ecran. 

5. Lorsque la bulle se deplace, examiner sa position a l'ecran. 

6. Si la position de la bulle est hors ecran, replacer la bulle a sa position d'origine. 
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Chacune de ces operations est relativement simple, mais demande de connaitre quelques 
notions indispensables comme positionner, deplacer un objet a l'ecran ou encore detecter 
un clic de souris. 



Placer un objet a l'ecran 

Pour placer un objet a l'ecran, il est necessaire de savoir comment determiner un point 
sur la scene de votre animation. Pour cela, nous devons nous souvenir de ce qu'est un 
systeme de coordonnees. 

Un systeme de coordonnees est compose d'une origine, d'un axe horizontal et d'un axe 
vertical. L'axe horizontal definit les abscisses, il est aussi appele « l'axe des X ». L'axe verti- 
cal definit les ordonnees, il est appele « l'axe des Y ». L' origine se trouve a la croisee des 
deux axes, qui se coupent en formant un angle droit. 

Sur Flash, et plus generalement sur un ordinateur, le systeme de coordonnees est defini 
comme le montre la figure ci-dessous. 



Figure I-9 

V origine se sitae en 
haut et a gauche de 
la scene. 




L' origine correspond au point ou x = 0 et y = 0. Elle se situe en haut a gauche de la scene. 
Ensuite, plus on se deplace vers la droite, plus les valeurs de x augmentent et, de la meme 
facon, plus on va vers le bas de l'ecran, plus les valeurs de y augmentent. 

Ainsi, pour placer un point a 300 pixels de 1' origine horizontalement et 200 pixels de 
l'origine verticalement, il suffit d'ecrire que la valeur du point en x vaut 300 et en y, 200, 
comme le montre la figure 1-10 ci-apres. 



Figure 1-10 

La valeur de x 
augmente en allant 
vers la droite et celle 
de y en allant vers 
le bas de la scene. 
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Deplacer un objet 

Pour deplacer un objet sur la scene, la methode consiste a augmenter ou diminuer la 
valeur des coordonnees de l'objet en x et/ou en y suivant la trajectoire souhaitee. 

Pour notre exemple, la bulle doit se deplacer vers le haut de la scene. En supposant que 
notre bulle soit positionnee a 300 pixels de l'origine, pour deplacer la bulle vers le haut 
nous devons diminuer la valeur de y. Partant de y = 300, la bulle doit, par exemple, s'affi- 
cher en y = 290, puis 280, 270. . . Pour realiser cela, nous devons, a chaque image affichee, 
oter 10 pixels a la valeur en y precedente. 

Detecter un die de souris 

La detection d'un clic de souris ne peut s'effectuer sans l'aide d'un programme particu- 
lier a l'environnement de programmation utilise. Avec Flash, cette detection est realisee 
grace a un programme qui gere les evenements occasionnes par l'utilisateur. 

Un evenement, comme son nom l'indique, est le resultat d'une action produite soit par 
l'utilisateur, soit par l'application elle-meme. Par exemple, lorsque l'utilisateur deplace 
la souris ou appuie sur une touche du clavier, un evenement specifique se produit. Le 
programmeur peut decider de realiser certaines actions lorsque l'un ou/et l'autre de ces 
evenements sont emis. 

ds= Pour en savoir plus 

L'etude des evenements est deta illee au chapitre 3, « Communiquerou interagir ». 

Pour notre application, nous aurons a gerer les evenements de type MouseEvent. CLICK 
pour savoir si le bouton d' envoi a ete clique ainsi que les evenements de type 
Event. ENTER_FRAME afin de deplacer la bulle vers le haut. 



Detecter qu'un objet est sorti de I'ecran 

Pour detecter qu'un objet est sorti de la scene, nous devons connaitre, avant tout, la 
hauteur et la largeur de la scene. Pour cela, nous allons definir des constantes correspon- 
dant a la taille de la scene, soit largeur et hauteur. La constante largeur correspond a la 
largeur de la scene, et hauteur a la hauteur de la scene, comme le montre la figure 1-11. 



Figure 1-11 

Largeur et hauteur 
sont des constantes 
definissant les limites 
de la scene. 



0 

0--A 



y < 0 



largeur 



x > larqeur 



hauteur 



y > hauteur 



Pour detecter qu'un objet est sorti de la fenetre, il sufht alors de tester si ses coordonnees 
sont plus petites que 0 ou plus grandes que 1 argeur et hauteur. 

Pour notre exemple, la bulle se deplace vers le haut de I'ecran en diminuant sa valeur 
en y. Elle sort done de I'ecran lorsque sa valeur en y devient plus petite que 0. 
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Traduction en ActionScript 3.0 

Nous avons examine d'un point de vue theorique et « en francais », la marche a suivre 
pour construire l'animation demandee. Regardons maintenant comment realiser cela 
avec le langage de programmation ActionScript 3.0. 

Ou placer le code ? 

L'animation que nous allons realiser est essentiellement composee d' instructions ecrites 
en ActionScript. Pour etre lues et interpreters par Flash, ces instructions doivent etre 
placees dans une fenetre specifique appelee Actions. 

Pour ouvrir ce panneau, il sufht de taper sur la touche F9 de votre clavier en ayant selec- 
tionne la premiere image du scenario, comme le montre la figure suivante. 



Figure 1-12 

Les instructions sont 
ecrites dans le 
panneau Actions, 
lorsque la premiere 
image du scenario 
est selectionnee. 




vor laroeurNumtw - otac* sugoWiolh; 
var hauteurNumber = stage stagel leight 



* a 

13 
14 
15 
18 
17 
18 
N 



WPositionnaf to be 
bl/ijouer i = luig^ur / 2. 
titnJouor > - haulour - 50. 



ds= Pour en savoir plus 

Le panneau Actions est decrit a la section « interface de programmation », a la fin de ce chapitre. 
Definir les constantes 

Pour savoir si la bulle de savon sort de la scene, nous devons connaitre la taille de cette 
derniere. Pour cela, il vous suffit de faire un clic droit (PC) ou Cmd + Clic (Mac) sur la 
scene, puis de selectionner l'item « Proprietes du document. . . ». La boite de dialogue ci- 
apres apparait. 



Figure 1-13 

La fenetre de 
Proprietes du docu- 
ment nous permet 
de connaitre la 
taille de la scene 
(Flash 8). 



Proprietes du i 



Titre: [ 
Description: 



~3 



Dimensions : | 550 px (largeur) x | -MO px (hauteur) 

Identique a : C Imprimante C Contenu <♦ Par defeut 

Couleur d'arriere-plan : I ^| 

Cadence : |~12 images/seconde 

Unites de la regie : | Pixels 



Etablir comme valeurs par defaut 



Annuler 
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Les valeurs situees dans la rubrique Dimensions correspondent aux valeurs maximales 
en x (largeur) et en y (hauteur). Ces valeurs peuvent etre recuperees par le programme 
grace a l'objet stage (traduire par scene en francais). Sachant cela, nous definissons deux 
variables largeur et hauteur dans lesquelles nous stockons la hauteur et la largeur de la 
scene de la facon suivante : 

var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 

D3= Pour en savoir plus 

La notion de variables est etudiee plus precisementau chapitre 1, section « Traiterles donnees ». 
Donner un nom aux symboles 

Les elements Bui 1 e et Bouton sont des graphiques que nous avons enregistres sous forme 
de symboles a la section precedente « Definir les objets utiles a 1' animation ». Lors de cet 
enregistrement, ces symboles ont ete places dans la bibliotheque de notre animation. 
Pour acceder a la bibliotheque (voir figure 1-14), tapez sur la touche Fl 1 (Mac et PC) ou 
Ctrl + L (PC) ou Cmd + L (Mac). 

Chaque symbole defini dans la bibliotheque est un modele qu'il est possible de dupliquer 
sur la scene autant de fois que Ton veut l'utiliser pour l'animation. Chaque element 
duplique est appele une « occurrence » ou encore une « instance ». 



Figure 1-14 

La bibliotheque regroupe 
tous les symboles cries 
pour I 'animation 
demandee (Flash 8). 
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Dans notre cas, nous ne souhaitons animer qu'une seule bulle de savon a l'aide d'un seul 
bouton de lancement. Pour placer une instance d'un symbole sur la scene, vous devez : 

• Selectionner dans le panneau Bibliotheque la ligne correspondant au symbole Bui 1 e, et 
la faire glisser sur la scene. 

• Repeter cette operation pour le symbole Bouton. 

Ensuite, pour utiliser ces elements a l'interieur d'un programme ActionScript, nous 
devons leur attribuer un nom. 
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Selectionner la bulle de savon, puis, sur le panneau Proprietes associe a ce symbole, 
donner un nom (par exemple, bSavon) dans le champ situe juste en dessous de Clip, 
comme le montre la figure ci-dessous. 

Selectionner le bouton d'envoi, et, sur le panneau Proprietes associe a ce symbole, lui 
donner le nom btnJouer dans le champ situe juste en dessous de Bouton, comme le 
montre la figure ci-dessous. 



Figure 1-15 

Chaque element de 
V animation doit 
porter un nom pour 
etre appele par un 
programme Action- 
Script. Le bouton est 
nomme btnJouer, 
la bulle bSavon. 





Actions | Proprietes x | Filtres 



| bSavon 



Actions I Proprietes x | Filtres I 
| Bouton 



"3 



btnJouer 



Remarque 

La position des deux elements btnJouer et bSavon sur la scene importe peu. Nous allons definir leur 
position par programme en section suivante. 



Definir la position du bouton d'envoi 

Pour centrer le bouton d'envoi en bas de l'ecran, nous devons calculer le centre sur l'axe 
horizontal de la scene et determiner sa position sur l'axe vertical par rapport a la hauteur 
de la scene. 

Pour calculer le milieu de la scene sur l'axe horizontal, il sufht de diviser en deux la 
largeur totale de la scene, soit 1 argeur / 2. Ensuite, pour placer le bouton vers le bas de 
l'ecran, nous pouvons decider de le positionner a hauteur - 50 pixels, comme le montre 
la figure suivante. 



Figure 1-16 

Le bouton btnJouer 
est place au centre 
sur I 'axe des X et a 
50 pixels du bord 
inferieur (axe des Y) 
de la scene. 
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Enfin, nous devons attribuer ces valeurs a l'objet btnJouer en definissant ses coordonnees 
en x et en y. Pour ce faire, il convient d'ecrire les instructions suivantes : 

btnJouer. x = largeur / 2; 
btnJouer. y = hauteur - 50; 

En ecrivant ces deux instructions, nous demandons a Flash de placer 1' occurrence 
nominee btnJouer a largeur / 2 (soit pour notre cas 400 11 = 200) sur l'axe des X, et 
hauteur - 50 (soit pour notre cas 300 - 50 = 250) sur l'axe des Y. 



Remarque 

Les notations nomDeL'Objet.x et nomDeL'Objet.y sont issues des principes de la programmation 
objet. Les termes x et y ont ete etablis par les concepteurs du langage ActionScript. lis permettent 
d'acceder a la position en x eten y de l'objet sur lequel ils sont appliques. 



ds= Pour en savoir plus 

Les principes de base de la programmation objet sont etudies au chapitre 2, section « Les symboles ». 
Definir la position de la bulle 

Pour placer notre bulle sur la scene, nous devons comme precedemment calculer le centre 
de la scene sur l'axe horizontal, et determiner la position de la bulle sur l'axe vertical. Ceci 
est realise grace aux instructions suivantes : 

bSavon. x = largeur / 2; 
bSavon.y = btnJouer. y - 30; 
poslnit = bSavon.y; 

Ici, l'occurrence nominee bSavon est placee a 400 11 = 200 sur l'axe des Xet 300 - 30 = 270 
sur l'axe des Y. 

La position verticale de la bulle est calculee en fonction de la position du bouton 
(bSavon.y = btnJouer. y - 30 ;). De la meme facon, les occurrences bSavon et btnJouer sont 
positionnees par rapport aux variables largeur et hauteur. En travaillant de la sorte, nous 
evitons d' avoir a recalculer la position de chaque objet, dans le cas oil nous voudrions 
modifier la taille de la scene. En effet, si nous souhaitons elargir la scene, il sufht simple - 
ment de modifier la valeur hauteur pour voir les objets se placer a nouveau correctement 
sur la scene. 



Remarque 

La variable poslnit permet de memoriser la position initiale de la bulle. Grace a cette variable, nous 
pourrons replacer la bulle a sa position d'origine, apres sa sortie de I'ecran. 

Detecter un die et lancer la bulle 

La detection d'un clic de souris s'effectue a l'aide d'une fonction propre a Action- 
Script 3.0. Elle obeit a une syntaxe precise decrite ci-dessous : 

btnJouer.addEventListener(MouseEvent.CLICK,auCl ic) ; 

L instruction se decompose en quatre termes. 

1. La fonction addEventListenerO est une methode du langage qui fait en sorte qu'un 
objet puisse entendre un evenement lorsqu'il est emis. 
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2. L'objet qui ecoute l'evenement correspond au premier terme de 1' instruction, celui 
qui est juste place devant la methode. Ici l'objet qui ecoute est btnJouer. 

3. L'evenement a ecouter est specifie en premier parametre de la fonction 
addEventl_istener( ). Ici, le bouton btnJouer ecoute un evenement particulier. II s'agit 
de l'evenement MouseEvent. CLICK, qui peut se traduire en francais par : « lorsque le 
bouton de la souris est enfonce puis relache ». 

4. Lorsque le clic est detecte, une action doit etre menee par 1' application. Celle-ci est 
decrite par un ensemble d' instructions regroupees sous un nom qui est fourni en second 
parametre de la methode addEventl_istener( ). Dans notre cas, lorsque nous cliquons 
sur le bouton btnJouer, le bloc d' instructions a executer est nomme auCl i ck. 

ts° Pour en savoir plus 

Lorsqu'un bloc d'instructions est regroupe sous un nom, on dit qu'il forme une fonction. L'etude des fonctions est 
realisee au cours du chapitre 7, « Les fonctions ». 

Le bloc d'instructions (fonction) auCl i ck( ) s'ecrit comme suit : 

function auClic(e:Event) :void{ 

bSa von. add Event Listener (Event . ENTER_FRAME,seDepl ace) ; 

I > 

L'instruction placee a l'interieur de la fonction auClickO met egalement en place un 
ecouteur d'evenements. En suivant le cheminement de decomposition precedent, on 
constate que : 

• Un ecouteur d'evenement est place sur l'objet bSavon. 

• L'evenement ecoute est Event . ENTER_FRAME. 

• A reception de cet evenement, la fonction seDepl ace est executee. 

L'evenement Event . ENTER_FRAME est emis automatiquement par le lecteur Flash lorsque le 
curseur place sur la ligne de temps se deplace d'une image a la suivante. Cet evenement 
est en realite lie a la cadence de l'animation qui est une propriete de l'animation definie a 
l'aide du panneau Proprietes du document (voir figure 1-13). 

Plus precisement, lorsque la cadence de l'animation est definie a 18 images par seconde, 
l'evenement Event. ENTER_FRAME est emis par le lecteur Flash, tous les 18 e de seconde. L'objet 
bSavon percoit ainsi l'evenement Event. ENTER^FRAME tous les 18 e de seconde. Grace a 
cela, les instructions situees dans le bloc seDepl ace sont repetees a chaque fois que 
l'evenement de type Event. ENTER_FRAME est percu par l'objet bSavon. 

La fonction seDepl ace( ) s'ecrit comme suit : 

function seDeplace(e:Event) :void{ 
bSavon. y = bSavon. y - 10; 

Ces instructions ont pour resultat : 

• de retrancher 10 pixels a la position precedente de la bulle de savon, dix-huit fois par 
seconde ; 

• d'afficher la bulle a sa nouvelle position, dix-huit fois par seconde. 

Grace a ce principe, la bulle se deplace automatiquement vers le haut de la scene indefi- 
niment. Sans autre instruction, la bulle sort de l'ecran et poursuit son chemin, tant que 
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l'animation n'est pas arretee par l'utilisateur (en cliquant sur l'icone de fermeture de la 
fenetre d' animation). 



Question 

Quel est le comportement de la bulle si Ton remplace I'instruction bSavon.y = bSavon.y - 10 par 
bSavon.x = bSavon.x + 10 ? 

Reponse 

La bulle se deplace non plus vers le haut, mais sur le cote. La bulle se deplace a I'horizontal, puisque ce 
sont les coordonnees en x qui sontmodifiees. Les coordonnees augmententde 10 en 10, done la bulle se 
deplace vers la droite. 



ds= Pour en savoir plus 

L'etude des evenements est detalllee au chapitre 3, section « Communiquer ou interagir ». 
Detecter la sortie de I'ecran et revenir a la position initiale 

Pour arreter 1' animation lorsque la bulle sort de I'ecran, nous devons inserer les instructions 
suivantes a l'interieur de la fonction seDepl ace( ) : 

if (bSavon.y < 0) { 
bSavon.y = poslnit; 

bSa von. remove Event Li stener( Event. ENTER_FRAME, seDepl ace) ; 

} 

En francais, ces instructions se traduisent ainsi : 

Si la bulle de savon depasse le bord superieurde I'ecran sur 1' axe des Y (if (bSavon.y < 0)), 
alors placer la bulle a sa position initiale (bSavon.y = poslnit;) puis detruire l'ecouteur 
d'evenement place sur l'objet bSavon (bSavon . removeEventLi stener( Event . ENTER_FRAME, 
seDepl ace) ;). 

L'objet bSavon ne percevant plus l'evenement Event. ENTER_FRAME, la fonction seDepl ace() 
n'est plus appelee, la bulle ne se deplace plus et reste a sa position initiale. 

Code source complet 

Pour resumer, le code qui permet de lancer la bulle de savon vers le haut de I'ecran, apres 
avoir clique sur le bouton de lancement, s'ecrit de la facon suivante : 

//La gestion des evenements necessite 1' import 
//des fonctions de la librairie flash. events 
import flash. events.*; 

//Recuperer la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 

//Positionner le bouton btnJouer 
btnJouer.x = largeur / 2; 
btnJouer. y = hauteur - 50; 

//Positionner la bulle 
bSavon.x = largeur / 2; 
bSavon.y = btnJouer. y - 30; 
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//Memoriser la position initiale de la bulle 
var posInit:Number = bSavon.y; 

//Placer un ecouteur de l'evenement CLICK sur btnJouer 
btnJouer. addEventListenertMouseEvent. CLICK, auClic) ; 

//Definir les actions a realiser lorsque l'on clique sur btnJouer 
function auClic(e:Event)( 

//Placer un ecouteur de l'evenement ENTER_FRAME sur bSavon 

bSa von. add Event Listener (Event . ENTER_FRAME,seDepl ace) ; 

} 

//Definir les actions a realiser lorsque 
//l'evenement ENTER_FRAME est emis 
function seDeplace(e:Event) :void{ 
bSavon.y = bSavon.y - 10; 
//si la bulle sort de l'ecran 
if (bSavon.y < 0) { 

//placer la bulle a sa position initiale 
bSavon.y = poslnit; 

//Detruire 1 'ecouteur d'evenement ENTER_FRAME 

bSavon . removeEventLi stener( Event . ENTER_FRAME, seDepl ace) ; 

} 

} 

Les lignes du programme qui debutent par les signes //sont considerees par ActionScript 
non pas comme des ordres a executer mais comme des lignes de commentaires. Elles 
permettent d'expliquer en langage naturel ce que realise l'instruction associee. 



Remarque 

La premiere instruction import fl ash. events.*; indique au compilateurque le programme utilise des 
fonctions de la librairie flash. events. Une librairie est un ensemble de programmes preecrits, qui 
propose au programmeurdes fonctionna lites avancees comme le calculde fonctions mathematiques ou le 
traitement des evenements. Chaque librairie porte un nom qui renseigne sur sa fonctionnalite. Ainsi, la 
bibliotheque ou se trouve I'ensemble des fonctions de calcul mathematique s'appelle flash. Math, et 
celle relative a la gestion des evenements porte le nom flash. events. 



Question 

Que se passe-t-il si l'on supprime l'instruction bSavon. removeEventListener(Event.ENTER_FRAME, 
seDeplace); ? 

Reponse 

La bulle revient a sa position initiale grace a l'instruction precedente bSavon y = poslnit;. La bulle 
detecte toujours l'evenement Event. enter_frame, la fonction seDepl ace( ) est alors executee, ce qui 
a pour consequence de relancer la bulle vers le hautde l'ecran. La bulle de savon ne s'arrete done jamais, 
des qu'elle sort de l'ecran, elle retourne a sa position initiale, pour repartir aussitot. L'utilisateur n'a plus 
besoin de cliquer sur le bouton pour lancer I'animation. 
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Executer {'animation 

Nous avons ecrit un programme constitue d'ordres, dont la syntaxe obeit a des regies 
strides. Pour realiser l'animation decrite dans le programme, nous devons la faire lire par 
l'ordinateur, c'est-a-dire 1' executer. 

Pour cela, nous devons traduire le programme en langage machine. En effet, nous 1' avons 
vu, l'ordinateur ne comprend qu'un seul langage, le langage binaire. 

Tester une animation 

Cette traduction du code source (le programme ecrit en langage informatique) en code 
machine executable (le code binaire) est realisee en testant l'animation. L' operation 
consiste a lancer un module (appele « interpreteur Flash ») qui lit chaque instruction du 
code source et verifie si celles-ci ont une syntaxe correcte. S'il n'y a pas d'erreur, l'inter- 
preteur exporte l'animation sous la forme d'un code binaire directement executable par 
l'ordinateur. II execute ensuite ce code en lancant l'animation. 

Pour tester votre animation vous devez executer les operations suivantes : 

1. Sauvegarder votre animation (utiliser le raccourci clavier Ctrl + S (PC) ou Cmd + S 
(Mac)) sous le nom an1mBune.fl a. 

2. Lancer le test de l'animation a l'aide du raccourci clavier Ctrl + Entree (PC) ou 
Cmd + Entree (Mac). L' exportation de l'animation est alors lancee et un nchier 
portant le nom animBul le.swf est cree sur votre disque dur. 

Lors de l'exportation, 1' interpreteur lit une a une chaque instruction. II reconnait les 
mots-cles tels que function ou encore Event. ENTER_FRAME grace a une liste specifique defi- 
nie par les concepteurs du langage. C'est pourquoi, vous devez ecrire ces mots-cles en 
respectant la meme syntaxe (orthographe et presence ou non de majuscule/minuscule) 
que celle definie dans la liste. 

Lorsque l'instruction est correctement interpretee, elle est traduite de facon a etre direc- 
tement executee par le processeur de l'ordinateur. Apres interpretation, vous vous trouvez 
en possession de deux types de fichier : 

• Les fichiers . f 1 a sont les fichiers contenant tous les dessins et programmes composant 
votre animation. lis sont en quelque sorte les fichiers sources de vos animations. Seuls 
ces fichiers sont utilisables pour corriger et/ou modifier vos animations. 

• Les fichiers . swf correspondent aux fichiers executables. lis sont composes de codes 
binaires et ne peuvent etre modifies. lis sont executes a travers le logiciel Flash ou 
grace au plug-in Flash du navigateur de l'utilisateur. 



Remarque 

Les plug-ins sont des modules externes au navigateur (Firefox, Internet Explorer...) qui permettent la 
lecture de formats autres que le format HTML. Ces modules sont en general gratuits ettelechargeables 
depuis Internet. 



II existe d' autres formats d' execution que le format .swf. Ce sont par exemple les 
formats . exe (PC) ou . hqx (Mac). lis sont utilises lorsqu'on souhaite executer l'animation 
de facon autonome et non a travers un navigateur. 



22 



Apprendre a programmer en ActionScript 3 



Lenvironnement de programmation Flash 

Outre le langage de programmation ActionScript 3.0, Flash propose une interface utilisa- 
teur conviviale pour elaborer des dessins, graphiques et autres elements utilises pour 
creer des applications publiables sur Internet. 



L'interface graphique 

L' interface utilisateur de Flash est composee de nombreux panneaux proposant des outils 
facilitant la creation des dessins et leur mise en place dans une animation. 

Notre objectif n'est pas d'etudier en detail chaque panneau, mais d'examiner ceux qui 
seront les plus utilises dans ce livre. 



La scene 

La scene est l'espace de travail sur lequel nous pouvons dessiner et construire nos anima- 
tions. Elle correspond a la page blanche de n'importe quel editeur de texte. Elle se situe 
au centre de l'interface utilisateur comme le montre la figure suivante : 




Figure 1-17 

L'interface utilisateur de Flash CS3 est composee de nombreux panneaux facilitant la creation et la mise 
en place des elements graphiques au sein d'une animation. 



La palette des outils de dessin 

La barre d'outils, situee a gauche de l'ecran, offre un choix d'outils de dessin, de colo- 
riage et de transformation des objets graphiques. Nous ne l'etudierons pas en detail. 
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Figure 1-18 

La palette des outils 
de dessin 
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Le panneau Proprietes 

Le panneau Proprietes se situe en bas de l'ecran, sous la scene. II s'agit d'un panneau 
contextuel, c'est-a-dire qu'il change en fonction des objets ou des outils selectionnes. 
II fournit toutes les informations relatives a l'objet ou a l'outil selectionne (epaisseur et 
couleur du trait pour l'outil Plume ; police, taille et style pour l'outil Texte, par exemple). 

Ce panneau est tres utile pour modifier les parametres d'un objet graphique (taille, 
couleur. . .) ou pour donner un nom a un symbole. 
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Figure 1-19 

Le panneau Proprietes relatifd la scene indique la taille et la couleur de fond de la scene ainsi que la cadence 
par defaut de V animation (nombre d' images par seconde). 

Le scenario, les caiques, les images et les images-cles 
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Figure 1-20 

Sur la partie gauche se trouve un caique nomme Action, sur la ligne de temps est placee une seule image-cle, 
en position 1. 
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Le panneau Scenario est un panneau essentiel de Flash (pas necessairement pour 
1' ActionScript). II consiste en une representation schematique du temps qui s'ecoule au 
cours d'une animation. Grace a ce panneau, nous pouvons determiner quand et combien 
de temps un element va s'afficher a l'ecran. 



Remarque 

Le panneau Scenario, comme nous le verrons au fur et mesure de la lecture de ce livre, devient un outil 
de moins en moins so I lie ite lorsqu'on programme les animations interactives en ActionScript. 



Le panneau Scenario se divise en deux parties : 

• A gauche se trouve un panneau de gestion des caiques. Les caiques offrent la possi- 
bility de dessiner sur des niveaux differents. De cette facon, les objets graphiques se 
superposent sans s'effacer. 

Ainsi, une animation peut etre composee de plusieurs plans : le fond (decor) et des 
elements animes se situant a differents niveaux de profondeur. Par exemple, des nuages 
couvrant le soleil, un oiseau passant devant les nuages. Les caiques facilitent la gestion 
des differents niveaux de profondeur. 

Les caiques permettent aussi d' organiser les differents elements de 1' animation. Par 
exemple, il est pratique de creer un caique pour y placer tous les elements relatifs a la 
navigation, un caique pour le fond, un caique pour les scripts, etc. 

• A droite se situe la ligne de temps (ou timeline) et la tete de lecture (curseur rouge). 

La ligne de temps est une representation simplified d'une bobine de film. Chaque 
cellule represente une image sur la bobine. Le curseur (ou tete de lecture), en se depla- 
cant image apres image, simule le deroulement de la bobine devant le projecteur et 
donne l'illusion d'un deplacement ou d'une animation. 

A une suite d' images correspond un temps d' animation. La cadence (definie dans le 
panneau Proprietes de la scene) correspond au nombre d' images affichees par seconde. 
Par defaut, ce nombre est de 12 images par seconde. Plus la cadence est faible (par exem- 
ple, 8 images par seconde), plus l'animation semble saccadee. A l'inverse, une cadence 
trop elevee (plus de 24 images par seconde) n'ameliore pas forcement la fluidite de 
l'animation, mais augmente le poids du fichier resultant. 

Images intermediaires et images-cles 

La ligne de temps est constitute d'une suite de cellules. Chaque cellule represente une 
image-cle ou une image intermediaire. Une image-cle est une image construite par le 
graphiste, alors qu'une image intermediaire est definie et calculee par Flash. Une image- 
cle est une image sur laquelle nous pouvons positionner les dessins, determiner leur 
taille, leur couleur, etc. 

Une image-cle est symbolisee par une pastille noire ou blanche sur la ligne de temps. 
Si la pastille est blanche, cela signifie que 1' image est vide (aucun symbole ni dessin 
ne sont places sur cette image). Si elle est noire, cela signifie qu'elle contient des 
graphiques. 
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Figure 1-21 

La bibliotheque de 
V application animBulle 
est composes de deux 
symboles nommes Bouton 
etBulle. Le symbole Bulle 
est selectionne et appa- 
rait dans lafenetre 
d'apercu situee au-dessus 
de la liste de symboles. 
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Le panneau Bibliotheque apparait en appuyant sur la touche Fl 1 (PC et Mac) ou Ctrl + L 
(PC) ou Cmd + L (Mac) de votre clavier. Ce panneau rassemble, d'une part, tous les 
symboles crees pour votre animation, et d' autre part, tous les fichiers son, image ou video 
que vous avez importes. 

II est possible d'obtenir une ou plusieurs copies d'un element de la bibliotheque, en 
faisant glisser le symbole a l'aide de la souris, de la fenetre Bibliotheque vers la scene 
principale. Cette copie est appelee « occurrence » ou encore « instance ». 

Attention, transformer une instance ou une occurrence modifie le symbole et par consequent 
toutes les occurrences presentes sur la scene. 

ds= Pour en savoir plus 

La creation de symbole ainsi que la notion d'occurrence sont traitees au chapitre 2, section « Les 
symboles ». 



Les panneaux associes a la position 



Figure 1-22 

Le panneau Aligner & 
Info & Transformation 
(version Flash 8). Pour 
passer de Vun a V autre, 
cliquez sur I'onglet 
approprie. 
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Les panneaux Info et Aligner sont tres pratiques pour positionner de facon exacte un 
element sur la scene. 
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Le panneau Info apparait a l'aide du raccourci clavier Ctrl + I (PC) ou Cmd + I (Mac). 
Grace a ce panneau, nous pouvons connaitre la taille de la forme selectionnee ainsi que 
sa position a l'ecran. Ces informations sont tres utiles lorsqu'il s'agit de positionner des 
objets en utilisant des instructions en ActionScript 3. 

Le panneau Aligner apparait a l'aide du raccourci clavier Ctrl + K (PC) ou Cmd + K 
(Mac). II facilite la mise en page et l'alignement des objets les uns par rapport aux autres. 
II permet aussi de repartir de facon equilibree les elements se trouvant sur la scene. 



/-'interface de programmation 

Pour ecrire des programmes en ActionScript, Flash propose une interface de programmation 
composee d'un panneau d' edition appele Actions dans lequel vous pouvez saisir vos 
lignes de programme. 



Le panneau Actions 

Le panneau Actions apparait en appuyant sur la touche F9 (PC et Mac) de votre clavier. 
II est attache uniquement a une image -cle du scenario, a un clip ou a un bouton. II n'est 
pas possible de placer des instructions sur un simple element graphique. Si, par erreur, 
vous tentiez de le faire, vous constateriez que le panneau Actions n'accepte aucune saisie 
et affiche le message : « Aucune action ne peut etre appliquee a la selection en cours ». 
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// La qestion des evenements necessite I'lmport des functions de la libraine flash events 
import flash events.*; 

// Recuperer la hauteur et la larqeur de la scene 



±1 



vai laiyeut.Nuinbei - 
■/til liauleui Numbei ' 



stage slageWidth, 
stage slayeHeigl iL 



// Posilryrinei le buulun btnJuuet 
btnJouor ■ = largour/2. 
bm Joucr y = hauteur - 50; 



bSavon i ■ 
b^flvnn w i 



largour / 2. 
hTn.lnuftry - 

irln position 



unfile Oft In hnlle 



vnr poslnirNiimher = hSfivnn .. 

// Placer un ecouteur de l evenement CLICK sur btnjouer 
MnJouer addLventListener(MouseLvent CLICK .auClic); 

// Liefinir les actions a realiser lorsque Ton clique sur btnjouer 

function auClic(e:Lvent|:voicH 
// Placer un ecouteur de I'evenement ENTER FRAME sur bSavon 
bSavon addEventListener(Event ENTER FRAME.seDeplace). 

} 

// Definir les actions a realiser lorsoue I'evenement ENTER FRAME est emis 



•I script 1 1 -a 

Ugne 7 dt 53, Cd 2 



^1 



Remarque 

Lorsqu'un programme est place sur une image-cle, la lettre a apparait dans la cellule correspondant a 
I'image-cle, sur la ligne de temps, juste au-dessus de la pastille noire (voir figure 1-20). 



A la source d'un programme 



Introduction 



Memento 

En informatique, resoudre un probleme c'est trouver la suite logique de tous les 
ordres necessaires a la solution dudit probleme. Cette suite logique est appelee « algo- 
rithme ». 

La construction d'un algorithme passe par l'analyse du probleme, avec pour objectif de le 
decouper en une succession de taches simplifiees et distinctes. Ainsi, a partir de l'enonce 
clair, precis et ecrit en francais d'un probleme, nous devons accomplir les deux operations 
suivantes : 

• Decomposer l'enonce en etapes distinctes qui conduisent a 1' algorithme. 

• Definir les objets manipules par 1' algorithme. 

Une fois 1' algorithme construit, il faut « ecrire le programme », c'est-a-dire traduire 
l'algorithme de facon a ce qu'il soit compris par l'ordinateur. En effet, un programme est 
un algorithme traduit dans un langage comprehensible par les ordinateurs. 

Un ordinateur est compose des deux elements principaux suivants : 

• La memoire centrale, qui sert a memoriser des ordres ainsi que des informations mani- 
pulees par le programme. Schematiquement, on peut dire qu'elle est composee 
d' emplacements reperes chacun par un nom (cote programmeur) et par une adresse 
(cote ordinateur). 

• L' unite centrale, qui execute une a une les instructions du programme dans leur ordre 
de lecture. Elle constitue la partie active de l'ordinateur. Ces actions, en nombre 
limite, sont les suivantes : 

- Deposer une information dans une case memoire. 

- Executer des operations simples telles que 1' addition, la soustraction, etc. 

- Comparer des valeurs. 

- Communiquer une information elementaire par 1' intermediate du clavier ou de 
l'ecran. 

- Coder 1' information. 

Du fait de la technologie, toutes les informations manipulees par un ordinateur sont 
codees en binaire (0 ou 1). Pour s'affranchir du langage machine binaire, on fait appel a 
un langage de programmation dit evolue, comme les langages C, Java ou ActionScript. 
Un tel programme se compose d' instructions definies par le langage, dont l'enchainement 
realise la solution du probleme pose. 

Dans cet ouvrage, nous nous proposons d'etudier comment construire un programme en 
prenant comme support de langage ActionScript avec Flash. Cette application permet 
d'associer de facon tres rapide des elements graphiques avec des instructions evoluees, 
grace a un environnement de travail compose de panneaux tels que la barre d'outils 
graphiques, le scenario ou encore la fenetre d' actions. 
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Exercices 

Observer et comprendre la structure d'un programme ActionScript 
Exercice 1.1 

Observez le programme suivant : 

// 

import flash. events.*; 

// 

var largeur:uint = stage. stageWidth; 
var hauteur :uint = stage. stageHeight; 

// 

btnGauche.x = largeur / 2; 
btnGauche. y = hauteur - 50; 

// 

bSavon.x = largeur ; 
bSavon.y = hauteur / 2; 

// 

btnGauche. add Event Li stener(MouseEvent. CLICK, auClic) ; 

// 

function auClic(e:Event)( 
bSa von. addEvent Li stenert Event. ENTER_FRAME,seDepl ace) ; 

} 

// 

function seDeplace(e:Event) :void{ 

// 

bSavon.x = bSavon.x - 10; 

// 

if (bSavon.x < 0) { 

// 

bSavon.x = largeur; 
} 

) 

1. En vous aidant du programme donne en exemple dans ce chapitre, expliquez, a l'aide 
des lignes de commentaires (//), le role de chaque bloc d'instructions. 

2. Quel type d'evenement est pris en compte dans ce programme ? Sur quel objet est-il 
applique ? 

3. Que fait le programme, lorsque que Ton clique sur l'objet btnGauche ? 

4. Que se passe-t-il lorsque la bulle sort de l'ecran ? 



Aide 

Le fichier ExerciceljL.fla, incluanttous les dessins necessaires a la realisation dece premier programme, 
se trouve dans le repertoire Exercices/SupportPourReal iserLesExercices/Introduction 
(cf. extension web). 



Remarque 

N'oubliez pas de verifier que les symboles places a l'ecran onttous ete correctement nommes dans leur 
fenetre de proprietes respective. 



A la source d'un programme I 
Introduction | 

Ecrire un premier programme en ActionScript 
Exercice 1.2 

En reprenant la structure du programme precedent, ecrivez un programme qui : 

• Place un bouton nomme btnDroi t au centre de la scene et a 50 pixels du bord inferieur 
de l'ecran. 

• Affiche une bulle de savon (bSavon) placee au centre de l'ecran. 

• Lorsque l'utilisateur clique sur le bouton btnDroi t, la bulle de savon se deplace vers la 
droite. 

• Si la bulle de savon sort de la fenetre, elle revient sur le bord gauche de la scene. 
Extension web 

Lefichier Exercicel„2.fla, incluanttous les dessins necessaires a la realisation dece premier programme, 
se trouve dans le repertoire Exercices/SupportPourRealiserLesExercices/Introduction. 



1 



Traiter les donnees 



En decrivant, au chapitre « A la source d'un programme », l'algorithme de l'oeuf a la 
coque, nous avons constate que la toute premiere etape pour construire une marche a 
suivre consistait a determiner les objets utiles a la resolution du probleme. En effet, pour 
faire cuire un oeuf a la coque, nous devons prendre un ceuf, de l'eau, une casserole... 

De la meme facon, lorsqu'un developpeur d' applications concoit un programme, il doit 
non pas prendre, au sens litteral du mot, les donnees numeriques, mais definir ces 
donnees ainsi que les objets necessaires a la realisation du programme. Cette definition 
consiste a nommer ces objets et a decrire leur contenu afin qu'ils puissent etre stockes en 
me moire. 

C'est pourquoi nous etudions, dans ce chapitre, ce qu'est une variable et comment la 
definir (voir section « La notion de variable »). Nous examinons ensuite, a la section 
« Calculs et operateurs arithmetiques », comment affecter une valeur a une variable. 
Nous analysons egalement comment ecrire des operations arithmetiques, tres utiles 
lorsqu'on souhaite deplacer un objet automatiquement a l'ecran. Ensuite, nous observons 
en section « Plus de precision sur l'affichage » comment afficher, d'une maniere 
detaillee, le contenu d'une variable. 

Pour finir, nous decrivons, a la section « Le projet mini site Internet », le cahier des char- 
ges de l'application projet que le lecteur assidu peut realiser en suivant les exercices 
decrits a la fin de chaque chapitre. 

Afin de clarifier les explications, vous trouverez tout au long du chapitre des exemples 
simples et concis. Ces exemples ne sont pas des programmes complets, mais de simples 
extraits qui eclairent un point precis du concept aborde. 

La notion de variable 

Un programme sous Flash manipule des valeurs comme le nombre d'objets qu'il doit 
afficher, ou encore la taille de la fenetre sur laquelle s'effectue l'animation. Ces donnees 
varient en cours d' execution du programme. Le nombre d'objets a afficher peut diminuer 
ou augmenter en fonction des actions de l'utilisateur. 
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Afin de faciliter la manipulation de ces valeurs, celles-ci sont stockees dans des cases 
memoire portant un nom. 

Ainsi, par exemple, si nous supposons que la case memoire contenant la valeur corres- 
pondant au nombre d'objets a afficher s'appelle nbObjet, il suffit, pour connaitre le 
nombre d'objets a afficher, que l'ordinateur recherche dans sa memoire la case nommee 
nbObjet. Lorsqu'il l'a trouvee, il examine son contenu. 

Une variable est done definie par un nom et une valeur qui est elle-meme caracterisee par 
un type. Nous examinons ce concept a la section « La notion de type ». 

Donner un nom a une variable 

Le choix des noms de variables n'est pas limite. II est toutefois recommande d'utiliser 
des noms evocateurs. Par exemple, les noms des variables utilisees dans une application 
qui gere les code-barres de produits vendus en magasin sont plus certainement article, 
prix, codebarre que xyzl, xyz2, xyz3. En effet, les premiers evoquent mieux l'information 
stockee que les seconds. 

Les contraintes suivantes sont a respecter dans l'ecriture des noms de variables : 

• Le premier caractere d'une variable doit obligatoirement etre different d'un chiffre. 

• Aucun espace ne peut figurer dans un nom. 

• Les caracteres &, ~ ", #, ', {, }, (, ), [, ], -, |, \ \, A , @, =, %, *, ?, , :, /, §, !, <, >, £, n, 
ainsi que ; et , ne peuvent pas etre utilises dans l'ecriture d'un nom de variable. 

• Tout autre caractere peut etre utilise, y compris les caracteres accentues, le caractere 
de soulignement (_), les caracteres Set |j. 



Remarque 

Aucun mot-cle du langage ActionScript ne peut etre utilise comme nom de variable. Les termes xety sont 
utilises pour positionner des objets sur la scene, il n'est done pas possible de creer et de nommer des 
variables x ou y. 



Le nombre de lettres composant le nom d'une variable est indefini. Neanmoins, l'objectif 
d'un nom de variable etant de renseigner le programmeur sur le contenu de la variable, il 
n'est pas courant de rencontrer des noms de variables de plus de trente lettres. 



Question 

Parmi les variables suivantes, quelles sont celles dont le nom n'est pas autorise et pourquoi ? 

Compte, pourquoi#pas, Num_2, -plus, Undeux, 2001espace, ©adresse, VALEUR_temporai re, 

ahlah!, Val$solde. 

Reponse 

Les noms de variables suivants ne sont pas autorises : 

pourquoi#pas, -pi us, ©adresse, ahlah!, carles caracteres #, -, (Set ! sont interdits. 
200lespace car, il n'est pas possible de placer un chiffre en debut de variable. 
Parcontre les noms de variables suivants sont autorises : 

Compte, Num_2 (« _ » et pas « - »), Undeux (et pas Un Deux), VALEUR_temporai re, Val $solde. 



Traiter les donnees | 

Chapitre 1 | 

Creer une variable 

Pour creer une variable a l'interieur d'un script, il suffit d'ecrire une instruction qui associe 
un nom a une valeur et determine son type. Par exemple, l'instruction : 

var positionEnX: Number = 2; 

cree une case memoire nommee positionEnX. Grace au signe =, la valeur 2 est enregistree 
a cet emplacement. En utilisant le terme Number, la valeur enregistree doit etre un nombre 
et non un caractere. 



Remarque 

Les termes var et Number sont des mots-cles du langage ActionScript indiquant que l'instruction qui suit 
est une declaration de variable numerique. Si I'utilisation de ces termes est fortement conseillee, elle n'est 
pas obligatoire, ce qui peut generer quelques problemes (voir section « Differents resultats pour differents 
types de variables » dans la suite). 



Le langage ActionScript est sensible a la casse. II fait la difference entre les majuscules et 
minuscules lors de la definition du nom des variables. Ainsi, par exemple, les termes 
positionEnX, PositionEnX ou encore POSITIONENX represented trois variables distinctes. 



Remarque 

Pour expliquer a I'ordinateurqu'une instruction estterminee, un point virgule (;) est place obligatoirement 
a la fin de la ligne destruction. 



Afficher la valeur d'une variable 

II est parfois important de connaitre le contenu d'une variable a un moment donne de 
l'execution d'une animation, surtout lorsque celle-ci ne se comporte pas exactement 
comme nous le souhaiterions. 

Grace a la commande traceO, nous allons pouvoir afficher le contenu d'une variable 
dans une fenetre specifique appelee « fenetre de sortie » (voir figure 1-1). 

La syntaxe d'utilisation de la commande trace est la suivante : 

trace(nomDeLaVariable) ; 



Extension web 

Vous trouverez tous les exemples de ce chapitre dans le fichier LesVariables.fi a, sous le repertoire 
Exemples/Chapitrel. 

Exemple 

Le programme suivant : 

var nbValeurs:Number = 10; 
trace(nbValeurs) ; 
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a pour resultat d'afficher la fenetre suivante, lors du test de 1' animation. 



I Sortie x | 




X 

















Figure 1-1 

La commande trace() affiche son message dans une fenetre de sortie. 



ds= Pour en savoir plus 

Les explications concernant le test d'une animation sont fournies au chapitre « A la source d'un 
programme », section « Traduction en ActionScript- Tester une animation ». 

II convient de declarer la variable avant de l'utiliser dans une expression. Si vous utilisez 
une variable qui n'est pas declaree, comme dans l'exemple suivant, un message d'erreur 
apparait. 

trace(nbValeurs) ; 

La commande traceO ne peut afficher le contenu de la variable nbVal eurs car la variable 
n'a pas ete declaree. Aucun espace memoire n'a ete reserve pour y stacker une valeur. Le 
test de 1' animation affiche le message d'erreur suivant « Acces a la propriete non definie 
nbVal eurs ». Lapplication ne peut etre executee. 





- X 


Sortie | Err eurs de compilation - 1 signalee(s) m L 




Emplacement 


Description I Source 


Sequence 1, Caique 'Caique 1', Image 1, ligne 1 


1 120: Acces a la propriete non definie nbValeurs. trace(nbValeurs); 


<l 


1 r 1 


Total des erreurs ActionScript : 1, Erreurs signalees 


1 AccSder a la source | .,, 



Figure 1-2 

Une erreur de compilation apparait lorsqu'une variable est utilisee sans avoir ete declaree au prealable. 



Remarque 

Lorsque la variable est declaree apres son affichage comme suit : 

trace(nbValeurs); 

var nbValeurs:Number = 10; 

Le compilateur ne detecte pas d'erreur de syntaxe. Cependant la commande trace( ) ne peut afficher le 
contenu de la variable nbVal eurs. La valeur affichee est NaN, c'est-a-dire « Not a Number ». 



Traiter les donnees 

Chapitre 1 



La notion de type 

Un programme gere des informations de natures diverses. Ainsi, les valeurs telles que 123 
ou 2.4 sont de type numerique tandis que Spinoza est un mot compose de caracteres. 
La notion de type permet de differencier ces donnees. 

Ainsi, un type de donnees decrit le genre d' informations qu'une variable peut contenir. 
Sous ActionScript, il existe trois categories de donnees : logique, numerique et caractere. 

Categorie logique 

La categorie logique est representee par le type Boolean. Les valeurs logiques ont deux 
etats : true (vrai) ou f al se (faux). 

ActionScript convertit egalement les valeurs true et f al se en 1 et 0 lorsque cela est neces- 
saire. Les valeurs booleennes sont le plus souvent utilisees dans les instructions effectuant 
des comparaisons pour controler le deroulement d'un script. 

ds° Pour en savoir plus 

Les structures effectuant des comparaisons sontetudiees au chapitre 4, « Faire des choix ». 
Categorie numerique 

Cette categorie contient trois types distincts : Number, int, uint. 

Le type Number est utilise pour decrire les nombres a virgule. Le type int permet l'utili- 
sation de nombres entiers positifs ou negatifs. Le type uint, quant a lui, correspond aux 
entiers uniquement positifs (uint : unsigned int). 

L'utilisation des differents types numeriques permet de gerer au mieux l'espace memoire 
utilise par l'animation. En effet, un nombre reel prend plus d'espace memoire qu'un 
entier. 



Remarque 

Les entiers non signes sont essentiellement utilises pour decrire les couleurs des objets a dessiner. 
La valeur correspondant a une couleurn'est jamais negative. 



Categorie caractere 

Le type de donnees representant la categorie caractere est le type String. 

Un String est une chaine de caracteres, autrement dit, une suite de caracteres (suite de 
lettres, chiffres et signes de ponctuation, par exemple). 

La declaration d'une variable contenant des caracteres s'effectue en placant la suite de 
caracteres entre des guillemets droits simples ou doubles. De cette facon, la chaine de carac- 
teres est traitee comme etant un mot et non comme representant le nom d'une variable. 
Par exemple, dans l'instruction : 

var mot:String = "Bonjour"; 

Grace aux guillemets, le terme "Bonjour" est considere comme une chaine et non comme 
une variable. Le terme mot correspond au nom de la variable contenant la suite des carac- 
teres Bonjour. 
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Calculs et operateurs arithmetiques 

Pour realiser une animation par programme, nous allons devoir apprendre a calculer ou 
plutot, apprendre a ecrire des operations mathematiques. En effet, disposer des elements 
graphiques sur la scene demande de savoir calculer leur position. Et certains mouvements 
complexes peuvent etre simules avec des equations mathematiques precises. 

Mais avant d'examiner comment realiser ces differentes operations, observons de facon 
detaillee le fonctionnement de l'affectation. 

Les mecanismes de l'affectation 

L'affectation est le mecanisme qui permet de placer une valeur dans un emplacement 
memoire. Elle a pour forme : 

variable = valeur; 

ou encore : 

variable = expression mathematique; 

Le signe egal (=) symbolise le fait qu'une valeur soit placee dans une variable. Pour eviter 
toute confusion sur ce signe mathematique bien connu, nous prendrons 1' habitude de le 
traduire par les termes p rend la valeur. 

Examinons les exemples suivants, en supposant que les variables n et p soient declarees 
avec le type entier : 

n = 4; I In prend la valeur 4 

p = 5*n+l; //calcule la valeur de 1 'expression mathematique soit 5*4+1 
//range la valeur obtenue dans la variable representee par p. 

L instruction d' affectation s'effectue dans l'ordre suivant : 

1. Calculer la valeur de l'expression figurant a droite du signe egal. 

2. Ranger le resultat obtenu dans la variable mentionnee a gauche du signe egal. 



Remarque 

La variable placee a droite du signe egal (=) n'est jamais modifiee, alors que ce lie qui est a gauche I'est 
toujours. Comme une variable ne peut stacker qu'une seule valeur a la fois, si la variable situee a gauche 
possede une valeur avant l'affectation, cette valeur est purement et simplement remplacee par la valeur 
situee a droite du signe egal (=). 



Exemple 

.-is 
b = a + 3; 
a = 3; 

Lorsqu'on debute en programmation, une bonne methode, pour comprendre ce que 
realise un programme, consiste a ecrire pour chaque instruction executee, un etat de 
toutes les variables declarees. II suffit pour cela de construire un tableau dont chaque 
colonne represente une variable declaree dans le programme et chaque ligne une instruction 
de ce meme programme. 



Traiter les donnees 

Chapitre 1 

Soit pour notre exemple : 



Tableau 1-1 Valeur des differentes variables apres traitements 



Instruction 


a 


b 


a = 1 


1 




b = a + 3 


1 


4 


a = 3 


3 


4 



Le tableau est compose des deux colonnes a et b et des trois lignes associees aux instruc- 
tions d' affectation du programme. Ce tableau montre que les instructions a = 1 et a = 3 
font que la valeur initiale de a ( 1 ) est effacee et ecrasee par la valeur 3. 



Question 

Quelles sontles valeurs des variables prix, tva et total apres execution des instructions suivantes ? 

var prix: Number = 20; 

var tva:Number = 0.186; 

var total : Number = prix + prix*tva; 

Reponse 



Tableau 1-2 Valeur des differentes variables apres traitements 



Instruction 


Prix 


Tva 


Total 


prix = 20; 


20 






tva = 0.186; 


20 


0.186 




total = prix + prix * tva; 


20 


0.186 


23.72 (20 +20 * 0.186) 



Question 

Que realisent les deux instructions suivantes ? 

var 1 argeur: Number = stage. stageWidth; 
var hauteur:Number = stage. stageHeight; 

Reponse 

L'objet stage (traduiten frangais par « scene ») estun objet predefini d'ActionScript. stage. stageWidth 
contient, comme son nom I'indique, la largeurde la scene et stage. stageHeight, sa hauteur. En decla- 
rant les variables l argeur et hauteur de cette fagon, nous recuperons la taille de la scene telle qu'elle 
est definie dans la fenetre de proprietes associee. 

Quelques confusions a eviter 

Le symbole de 1' affectation est le signe egal (=). Ce signe, tres largement utilise dans 
l'ecriture d'equations mathematiques, est source de confusion lorsqu'il est employe a 
contresens. 

Pour mieux nous faire comprendre, etudions trois cas : 



1. a = a + 1; 
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Si cette expression est impossible a ecrire d'un point de vue mathematique, elle est tres 
largement utilisee dans le langage informatique. Elle signirie : 

• calculer l'expression a + 1 ; 

• ranger le resultat dans a . 

Ce qui revient a augmenter de 1 la valeur de a. 

2. a + 5 = 3; 

Cette expression n'a aucun sens d'un point de vue informatique. II n'est pas possible de 
placer une valeur a l'interieur d'une expression mathematique, puisque aucun emplacement 
memoire n'est attribue a une expression mathematique. 

3. a = b; et b = a ; 

A l'inverse de l'ecriture mathematique, ces deux instructions ne sont pas equivalentes. La 
premiere place le contenu de b dans a, tandis que la seconde place le contenu de a dans b. 

Echanger les valeurs de deux variables 

Nous souhaitons echanger les valeurs de deux variables de meme type, appelees a et b ; 
c'est-a-dire que nous voulons que a prenne la valeur de b et que b prenne celle de a. La 
pratique courante dans l'ecriture d'expressions mathematiques fait que, dans un premier 
temps, nous ecrivons les instructions suivantes : 

a = b; 
b = a; 

Verifions sur un exemple si l'execution de ces deux instructions echange les valeurs de a 
et de b. Pour cela, supposons que les variables a et b contiennent initialement respectivement 
2 et 8. 



Tableau 1-3 Valeur des variables apres affectation 





a 


b 


Valeur initiate 


2 


8 


a = b 


8 


8 


b = a 


8 


8 



Du fait du mecanisme de 1' affectation, la premiere instruction a = b detruit la valeur de a 
en placant la valeur de b dans la case memoire a. Lorsque la seconde instruction b = a est 
realisee, la valeur placee dans la variable b est celle contenue a cet instant dans la variable 
a, c'est-a-dire la valeur de b. II n'y a done pas echange, car la valeur de a a disparu par 
ecrasement lors de l'execution de la premiere instruction. 

Une solution consiste a utiliser une variable supplementaire, destinee a contenir tempo- 
rairement une copie de la valeur de a, avant que cette derniere ne soit ecrasee par la valeur 
de b. 



Remarque 

Pour evoquer le caractere temporaire de la copie, nous appelons cette nouvelle variable tmp. Nous 
aurions pu choisir tout aussi bien tempo, ttt ou toto. 



Traiter les donnees 

Chapitre 1 



Voici le deroulement des operations : 

tmp = a; 
a = b; 
b = tmp; 

Verifions qu'il y a reellement echange, en supposant que nos variables a et b contiennent 
initialement respectivement 2 et 8. 



Tableau 1-4 Valeur des variables apres permutation par affectation 





a 


b 


tmp 


Valeur initiate 


2 


8 




tmp = a 


2 


8 


2 


a = b 


8 


8 


2 


b = tmp 


8 


2 


2 



A la lecture de ce tableau, nous constatons qu'il y a bien echange de valeurs entre a et b. 
La valeur de a est copiee dans un premier temps dans la variable tmp. La valeur de a peut des 
lors etre effacee par celle de b. Pour finir, grace a la variable tmp, la variable b recupere 
l'ancienne valeur de a. 



ds= Pour en savoir plus 

Une autre solution vous estproposee dans la feullle d'exercices, a la section « Comprendre le mecanisme 
d'echange de valeurs », placee a la fin du chapitre. 



Les operateurs arithmetiques 

Ecrire un programme ne consiste pas uniquement a echanger des valeurs, mais c'est aussi 
calculer des equations mathematiques plus ou moins complexes afin de realiser, par 
exemple, certains effets speciaux pour deplacer ou animer un objet. 

Pour exprimer une operation, le langage ActionScript utilise des caracteres qui symbolisent 
les operateurs arithmetiques. 

Tableau 1-5 Operateurs arithmetiques 



Symbole 


Operation 


+ 


Addition 




Soustraction 


* 


Multiplication 




Division 


% 


Modulo 



Exemple 

Soit a, b, c trois variables de meme type. 

• L' operation d' addition s'ecrit : a = b + 4. 

• L operation de soustraction s'ecrit : a = b - 5. 

• L operation de division s'ecrit : a = b / 2etnonpasa = - 
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• L operation de multiplication s'ecrit : a = b * 4etnonpasa = 4b ou a = a x b. 

• L' operation de modulo s'ecrit : a = b % 3. 

Le modulo .d'une valeur correspond au reste de la division entiere. Ainsi : 5 % 2 = 1 . 

II s'agit de calculer la division en s'arretant des que la valeur du reste devient inferieure 
au diviseur, de facon a trouver un resultat en nombre entier. L'operateur % ne peut etre 
utilise pour les reels, pour lesquels la notion de division entiere n'existe pas. 

Question 

Les operations suivantes sont-elles valides ? 
delta = b2 - 4ac; 

z = - + 3£xa ; 
2 

Reponse 

Aucune des deux operations n'estvalide. 
delta = b2 - 4ac; 

doits'ecrire delta = b*b - 4 *a*c; 

z = - + 3£xa; 

2 

doits'ecrire z = b/ 2 + 3%x*a; 



L' ensemble de ces operateurs est utilise pour calculer des expressions mathematiques 
courantes. Le resultat de ces expressions n'est cependant pas toujours celui auquel on 
s' attend si Ton ne prend pas garde a la priori te des operateurs entre eux (voir section « La 
priorite des operateurs entre eux » ci-apres). 

Addition de mots 

L'operateur d' addition (+) peut etre aussi utilise pour additionner des chaines de carac- 
teres. Ce type d'operation s'appelle la « concatenation ». Lorsque deux chaines de caracteres 
sont additionnees, les deux mots sont places l'un a la suite de l'autre, dans le sens de 
lecture de 1' operation. 

Ainsi, les instructions : 

var motl:String = "Le mystere "; 
var mot2:String = "de la chambre jaune"; 
var titre:String = motl + mot2; 
trace(titre) ; 

ont pour resultat : 

| Sortie x | Erreurs de compilation 1 

Le mystere de la chambre jaune 



Figure 1-3 

La somme de deux chaines de caracteres place le deuxieme terme de V addition a la suite du premier. 




Traiter les donnees 

Chapitre 1 



L' operation motl + mot2 fait que le terme "de la chambre jaune" est place a la suite du 
terme "Le mystere". 



Remarque 

Notez que I'espace situe entre "mystere" et "de" doit etre inclus dans les guillemets de la chaine de 
caracteres, que ce soiten fin de motl ou au debutde mot2. 



La priorite des operateurs entre eux 

Lorsqu'une expression arithmetique est composee de plusieurs operations, l'ordinateur 
doit pouvoir determiner quel est l'ordre des operations a traiter. Le calcul de 1' expression 
a - b / c * d peut signifier a priori : 

• Calculer la soustraction puis la division et pour finir la multiplication, soit le calcul : 
((a - b) / c) * d. 

• Calculer la multiplication puis la division et pour finir la soustraction, c'est-a-dire 
1' expression : a - (b / (c * d)). 

Afin de lever toute ambiguite, il existe des regies de priorite entre les operateurs, regies 
basees sur la definition de deux groupes d'operateurs. 



Tableau 1-6 Groupes d'operateurs 



Groupe 1 


Groupe 2 


+ - 


* / % 



Les groupes etant ainsi definis, les operations sont realisees sachant que : 

• Dans un meme groupe, 1' operation se fait dans l'ordre d' apparition des operateurs 
(sens de lecture). 

• Le deuxieme groupe a la priorite sur le premier. 

L' expression a - b / c * d est done calculee de la facon suivante : 



Tableau 1-7 Ordre de calcul de la formule a - b / c * d 



Priorite 


Operateur 




Groupe 2 


/ 


Le groupe 2 a priorite sur le groupe 1, et la division apparait dans le sens de la 
lecture avant la multiplication. 


Groupe 2 


* 


Le groupe 2 a priorite sur le groupe 1, et la multiplication suit la division. 


Groupe 1 




La soustraction est la derniere operation a executer, car elle est du groupe 1. 



Cela signifie que 1' expression est calculee de la facon suivante : 
a - (b / c * d) 



Remarque 

Les parentheses permetlentde modifier les regies de priorite en forgant le calcul prealable de I'expresslon 
qui se trouve a I'interieur des parentheses. E lies offrent en outre une meilleure lislblllte de I'expression. 
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Differents resultats pour differents types de variables 

Le langage ActionScript autorise a ne pas dehnir explicitement le type des donnees 
contenues dans une variable. En effet, lorsqu'on ecrit : 

var valeur = 15; 

ActionScript determine le type de donnee de la variable en evaluant 1' element a droite du 
signe =. Cette evaluation lui permet de savoir s'il s'agit d'un nombre, d'un booleen ou 
d'une chaine de caracteres. Ici, ActionScript determine que valeur est de type Number, 
meme si la variable n'a jamais ete declaree avec le mot-cle Number. 



Remarque 

Lorsqu'une variable n'est pas veritablement typee lors de sa declaration, une affectation ulterieure peut 
changer le type de valeur. Ainsi, par exemple, I'instruction valeur = "A bientot" modifie le type de 
valeur. II passe automatiquement de Number a String. 



Conversion automatique 

Pour certaines operations, ActionScript convertit les types de donnees en fonction des 
besoins. Par exemple, lorsqu'on ecrit : 

var phrase :String = "Dites : " + 33; 

ActionScript convertit le chiffre 33 en chaine "33" et l'ajoute a la fin de la premiere 
chaine. Au final, la variable phrase contient la chaine "Dites : 33". 

Plus de precision sur l affichage 

Flash est un logiciel offrant de multiples fonctionnalites en matiere d'affichage (anima- 
tion, presentation interactive d' exposes...). Alors evidemment, afhcher le contenu d'une 
variable dans une fenetre de sortie semble bien desuet et presque trop banal. 

Pourtant, lorsqu'on apprend a programmer (et meme lorsqu'on est un programmeur 
chevronne), il est parfois tres utile de pouvoir connaitre la valeur d'une variable a 
un instant donne, surtout lorsque l'animation ne se comporte pas comme nous le souhai- 
terions. 

Dans ce type de situation, nous pouvons dire que l'afhchage du contenu des variables est 
reellement une aide pour comprendre le deroulement d'un programme. 

Nous vous invitons done, le plus souvent possible, des que vous ne comprenez pas pour- 
quoi votre animation afhche autre chose que ce vous pensiez avoir ecrit, a utiliser la 
commande trace( ) avec toutes ses possibilites. 

Afficher le contenu d'une variable... 

Soit la variable val eur. L'afhchage de son contenu a l'ecran est realise par : 

var val eur: Number = 22; 
trace(valeur) ; 
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Ce qui a pour resultat d'ouvrir une fenetre de sortie, au moment de l'appel de la 
commande trace( ) et d'afficher le resultat de la facon suivante : 



| bot tie « | Erreurs de compilation 

22 



- X 




Figure 1-4 

La commande trace() affiche le contenu a" une variable dans une fenetre de sortie. 

... avec un commentaire 

Le fait d'ecrire une valeur numerique, sans autre commentaire, n'a que peu d'interet. 
Pour expliquer un resultat, il est possible d'aj outer du texte avant ou apres la variable, 
comme dans l'exemple : 

traceC'Position en x = " + valeur); 

ou 

j trace(valeur + " -> x"); 

Pour ajouter un commentaire avant ou apres une variable, il suffit de le placer entre 
guillemets (" ") et de l'accrocher a la variable a l'aide du signe +. De cette facon, Flash 
est capable de distinguer le texte a afficher du nom de la variable. Tout caractere place 
entre guillemets est un message, alors qu'un mot non entoure de guillemets correspond 
au nom d'une variable. 

En reprenant la meme variable valeur qu'a l'exemple precedent, le resultat affiche pour 
les deux exemples est celui de la figure 1-5. 



| bot tie .« | Erreurs de compilation 




Figure 1-5 

La commande trace( ) affiche egalement des commentaires. 
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Affichage de plusieurs variables 

On peut afficher le contenu de plusieurs variables en utilisant la meme technique. Les 
commentaires sont places entre guillemets, et les variables sont precedees, entourees ou 
suivies du caractere +. Le signe + reunit chaque terme de 1' affichage au suivant ou au 
precedent. Pour afficher le contenu de deux variables : 



var posX:Number = 255; 
var posY:Number = 324; 
trace(" position en x : 



" + posX + ", position en y : " + posY); 



Question 

Quel est le resultat de l'instruction precedence ? 
Reponse 

L'executlon de cette instruction a pour resultat : 

| Sortie x | Erreurs de compilation 



position en x : 255, position en y : 324 



Figure 1-6 

Affichage de commentaires et de variables 



Affichage de la valeur d'une expression arithmetique 

Dans une instruction d' affichage, il est possible d' afficher directement le resultat d'une 
expression mathematique, sans qu'elle ait ete calculee auparavant. Par exemple, nous 
pouvons ecrire : 



trace(a+" fois " + b + " est egal a " + a * b); 
A l'ecran, le resultat s'affiche ainsi comme sur la figure 1-7. 



a = 10; 
b = 5; 

trace(a+" fois " + b + " est egal a 



Sortie ■ | Erreurs de compilation 

10 fois 5 est egal a 50 



Figure 1-7 

Affichage d'une expression mathematique 
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Mais attention ! Cette expression est calculee au cours de l'execution de 1' instruction, 
elle n'est pas memorisee dans un emplacement memoire. Le resultat ne peut done pas 
etre reutilise dans un autre calcul. 

L'ecriture d'une expression mathematique a l'interieur de la fonction d'affichage peut 
etre source de confusion pour Flash, surtout si 1' expression mathematique comporte un 
ou plusieurs signes +. En remplacant, dans l'exemple precedent, le signe * par +, nous 
obtenons : 

traceta + " plus " + b + " est egal a " + a + b); 
A l'ecran, le resultat s'affiche de la facon suivante : 



bottie • | Erreurs de compilation [ 

10 plus 5 est egal a 105 



Figure 1-8 

L'affichage d'une addition a l'interieur de la commande trace() ne fournit pas le bon resultat. 



Remarque 

L'ordinateur ne peut pas afficher la somme de a et de b parce que, lorsque le signe + est place dans la 
fonction d'affichage, il a pour role de reunirdes valeurs etdu texte surune meme ligne d'affichage, etnon 
d'additionner deux valeurs. 105 n'est que la reunion (concatenation) de 10 et de 5. 



Pour afficher le resultat d'une addition, il est necessaire de placer entre parentheses le 
calcul a afficher. Par exemple : 



trace(a + " plus " + b + " est egal 
Le resultat a l'ecran est : 



+ (a+b)) : 



Sortie x | Erreurs de compilation 

10 plus 5 est egal a 15 



Figure 1-9 

Pour additionner deux nombres dans la commande trace(), il convient de placer V operation entre parentheses. 
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Le projet mini site 

Pour vous permettre de mieux maitriser les differentes notions abordees dans cet 
ouvrage, nous vous proposons de construire une application plus elaboree que les 
simples exercices appliques donnes en fin de chapitre. 

Notre objectif, n'est pas d'ecrire une application tres sophistiquee graphiquement ni un 
programme complexe et optimal. 

Nous souhaitons, a Tissue de ce projet, vous avoir initie aux techniques de programmation 
de base avec une bonne connaissance de la programmation objet, et vous avoir appris a 
transformer une simple idee en un programme qui la realise au plus pres. 

Pour toutes ces raisons, nous allons definir le projet a partir de l'idee, puis examiner la 
demarche qui va permettre sa realisation. 

Le but est d'ecrire une application interactive conviviale de type site Internet qui utilise, 
de par son contenu, une grande partie des capacites « multimedia » de Flash. 

Pour sa realisation, il convient de suivre les etapes suivantes : 

• Definition du probleme (voir section « Cahier des charges »). 

• Description du fonctionnement de 1' application (voir section « Specifications fonc- 
tionnelles »). 

• Decomposition du probleme en differentes etapes logiques (voir section « Specifications 
techniques »). 

• Ecriture des programmes associes a chacune de ces etapes (voir section « Le projet 
mini site » en fin de chaque chapitre de cet ouvrage). 

• Test des programmes (voir section « Le projet mini site » en fin de chaque chapitre de 
cet ouvrage). 

Chacune de ces etapes est necessaire a la bonne conduite d'un projet informatique. 

Cahier des charges 

La redaction du cahier des charges va nous aider a delimiter le probleme. Notre objectif est 
d' apprendre a programmer, tout en utilisant au mieux les capacites multimedia de Flash. 

Examinons ce qu'il est possible de realiser avec Flash : 

• Creer des animations plus ou moins complexes. 

• Concevoir des elements interactifs (boutons, menus, rubriques. . .). 

• Afficher des textes, des images, des videos. 

• Integrer du son. 

Pour mettre en oeuvre chacune de ces possibilites, nous vous proposons de construire un 
mini site qui rassemble, dans une meme application, differents types de realisations 
(photo, texte, animation avec ou sans son). 

Les photos, les animations, les videos et les informations textuelles representent des 
rubriques differentes. 

La quantite d' informations (nombre de photos, d' animations...) n'est pas determined a 
l'avance. Pour que l'utilisateur puisse effectuer un choix, les photos, les animations et les 
videos sont presentees sous format reduit avant d'etre affichees en grand format. 
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Un texte de presentation accompagne les elements multimedia, (photos, animations et 
videos). II donne une breve description de l'element informant par exemple sur le lieu ou 
la date de prise de la photo sous la forme d'une legende. 

Specifications fonctionnelles 

Le cahier des charges definit certaines contraintes telles que le nombre de rubriques, la 
necessite de creer des themes a l'interieur de ces rubriques, ou encore la prise en compte 
des differents formats d'affichage. Pour repondre au plus pres a ces contraintes, il est 
necessaire de decrire le fonctionnement de l'application, c'est-a-dire d'en ecrire les 
specifications fonctionnelles. 

Compte tenu du caractere multimedia de 1' application, expliquer son fonctionnement revient 
a en presenter graphiquement les elements (design) et la facon dont ils interagissent. 

L'application doit presenter, sous une forme harmonieuse et coherente, plusieurs thema- 
tiques. Pour realiser cela, il existe differentes techniques usuelles permettant la naviga- 
tion d'un theme a un autre. II s'agit des elements d'interaction comme les menus ou 
encore les barres de navigation. 

Schemas de presentation 

Compte tenu du cahier des charges et des differents elements de navigation qui en decou- 
lent, nous vous proposons d' organiser le mini site sous differentes formes, selon le type 
d' informations a presenter. Ces formes sont communement appelees les pages du site. 

Les pages du mini site a construire sont la page principale offrant la possibility a l'inter- 
naute de visiter l'integralite du site. Nous appelons cette page, la page Accueil. Les autres 
pages du site sont nominees en fonction du type d' informations qu'elles contiennent. 
Ainsi nous aurons les pages Photos, Animes, Videos et Info. 

La page Accueil 

Lorsque l'internaute arrive sur le site, le titre de ce dernier s'affiche ainsi que les differen- 
tes rubriques proposees par le cahier des charges. Les rubriques se presentent sous la 
forme de zones rectangulaires colorees cliquables. A l'ouverture du site, les differentes 
zones colorees s'affichent au hasard sur la scene puis, se deplacent en douceur vers leur 
position finale. 

Figure 1-10 

La page a" accueil du 
mini site presente les 
differentes rubriques 
du site sous forme 
de zones colorees 
cliquables. 




Lorsque les zones colorees ont trouve leur position definitive, elles deviennent des rubriques 
cliquables afin de permettre a l'internaute de visualiser ce qu'elles contiennent. 
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Les pages Photos et Animes 

Les pages Photos et Animes s'affichent lorsque l'utilisateur clique sur les rubriques 
correspondantes. Les pages s'affichent a l'ecran a l'aide d'une petite animation qui rend 
la visite du site plus agreable (voir section « Navigation » ci-apres). 



Figure 1-11 

La page Photos 




Les pages Photos et Animes se presentent sous la meme forme. Chacune possede une 
serie de vignettes qui representent sous un format reduit les photos ou les animations a 
visualiser. Lorsque le curseur de la souris survole une des vignettes, un texte apparait 
donnant des informations plus precises sur la photo ou 1' animation. 



Figure 1-12 

La page Animes 




Lorsque l'utilisateur clique sur une des vignettes, la photo ou l'animation s'affiche en 
grand format a droite des vignettes. 

Les vignettes, les photos, les animations ainsi que les textes sont charges dynamiquement 
de facon a rendre le site plus facilement telechargeable. 

La page Videos 

La page Videos a pratiquement la meme apparence que les pages Photos et Animes. Une 
serie de vignettes representant les themes generaux des videos est proposee a l'utilisateur. 
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Les vignettes reagissent au survol de la souris de la meme facon que les vignettes des 
pages Photos et Animes. 



Figure 1-13 

La page Videos 




La difference entre la page Videos et les precedentes apparait lorsque l'utilisateur clique 
sur une vignette. En effet, lorsque ce dernier clique sur des vignettes de la rubrique, un 
outil de controle des videos s'affiche en grand format a droite des vignettes. Ce dernier 
propose des elements d'interaction pour lancer, faire une pause ou arreter la video. II est 
egalement possible de modifier le volume sonore de la video en cours de lecture. 

Les vignettes et les textes accompagnant les videos sont charges dynamiquement. La video 
est lue en streaming. 

La page Infos 

La page Infos se presente differemment des pages precedentes. Lobjectif de cette page 
est d'exposer des informations relatives a l'environnement Flash sous la forme : 

• d' informations textuelles (bibliographie) ; 

• de liens cliquables (webographie) ; 

• d'adresses de type courrier electronique pour dialoguer avec l'auteur. 



Figure 1-14 

La page Infos 



■ OMvrirlNoanigtadufra : nop //wwwj^annetasso fr 

■ OWen.r de ra.de sur Internet Wtp //flash mediabox ft/index php?snowforum>91 

■ Poor en savor plus avec un kvre : AcbonScnpt 3 par I'exempte. J. LoCL Ed. 0'Re«y 

■ Essential AcfeonScnpt 3. C. Mook, Ed. CTreltty 
Dialoguer avec l'auteur 



0 

8 
© 



Les informations presentes sur la page sont lues a partir d'un fichier XML qui regroupe 
les differentes informations ainsi que leur type (lien, texte, e-mail). 
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Navigation 

Pour passer d'une page a 1' autre nous devons definir des elements de navigation qui 
rendent le site plus agreable a visiter. Ces elements sont ceux qui reagissent aux clics de 
l'internaute, a savoir : 

• les rubriques presentes des la page d'accueil ; 

• le titre du site (voir figure 1-15. O) ; 

• les vignettes associees a une page (voir figure 1-15. ©) ; 

• les petits rectangles colores situes en haut et a droite de la scene (voir figure 1-15.©) ; 

• les liens cliquables de la page Infos (voir figure 1-15.©. 



Le titre, les rubriques 
et les mini rubriques 
sont des elements de 
navigation. 




Pour indiquer qu'un element est cliquable, nous devons faire en sorte qu'il reagisse au 
survol de la souris en changeant l'intensite de sa couleur et en transformant la fleche de 
la souris en forme de main. 

Cliquer sur l'un de ces elements a pour consequence d'afficher un nouvel element (une 
page, une photo. . .). La facon dont s'affiche ces nouveaux elements ne doit pas etre negli- 
gee car elle permet d'ameliorer l'ergonomie et la convivialite du site. Pour cela, il 
convient de definir un « scenario » d'affichage des elements. 

Affichage de la page d'accueil 

Afficher la page d'accueil consiste a presenter les quatre rubriques sous la forme de 
quatre zones rectangulaires de couleur differentes. Cet affichage s'effectue en douceur 
des le chargement du site. Les quatre zones colorees sont tout d'abord invisibles puis 
progressivement visibles. Elles s'affichent n'importe oil sur la scene et se deplacent peu 
a peu vers leur position finale. 

II est possible d'afficher a nouveau cette page introductive en cliquant sur le titre du site. 
L affichage des rubriques s'effectue alors de la me me facon que lors du chargement du 
site. 

Affichage d'une page 

Lorsque l'utilisateur clique sur une des rubriques, la page associee s'affiche tout 
d'abord sur une ligne dont la couleur correspond a celle de la rubrique. La ligne 
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s'epaissit ensuite pour devenir une zone rectangulaire dont la taille correspond aux 
limites de la scene. 

Lorsque la zone est entierement affichee : 

• Les vignettes ou les liens cliquables s'affichent sur le cote gauche de la page. Cliquer 
sur une vignette a pour consequence d'afficher une photo, une animation ou le lecteur 
video. Ces elements apparaissent a l'ecran en dormant l'impression qu'ils s'agrandissent 
en partant de la vignette cliquee pour arriver sur le cote droit de la page. 

Lorsque l'utilisateur clique sur un des liens de la page Info, soit une nouvelle page est 
creee dans le navigateur afin d'afficher le contenu du site associe au lien, soit un 
message est cree a partir du logiciel de messagerie de l'utilisateur pour qu'il puisse 
envoyer un message a l'auteur. 

• Trois petits rectangles symbolisant les autres rubriques s'affichent au-dessus de la 
page. Si l'utilisateur clique sur l'un d'entre eux, la page correspondant a la rubrique 
s'affiche de la meme facon que precedemment. Le petit rectangle correspondant a la 
page en cours est efface. Un texte indiquant le nom de la rubrique s'affiche lorsque le 
curseur de la souris survole chacun des petits rectangles. 



Specifications techniques 

Apres avoir determine 1' aspect graphique de notre application, ainsi que les interactions 
entre les differents elements qui la composent, nous sommes en mesure d' examiner les 
etapes necessaires a la realisation du mini site. 

Les objets manipules 

Chaque element dessine sur la presentation du mini site est un objet a creer en memoire. 
Certains (les vignettes, les pages particulier) sont egalement constitues d' objets. 

Chaque photo ou animation doit etre placee dynamiquement dans le programme, de 
fagon a pouvoir etre modifiees sans avoir a transformer 1' application finale. Ainsi, les 
photos sont placees dans un repertoire specifique nomme Photos. Le repertoire contient, 
par exemple, tout ce qui concerne la page Photos (les vignettes -vignette0.jpg, 
vignettel.jpg...—, les photos en grand format —Photos0.jpg, Photosl.jpg...— ou les 
textes accompagnant les photos - Infos0.jpg, Infosl.jpg...). 

La liste des ordres 

Pour creer une application telle que le mini site, nous devons decomposer l'ensemble de 
ses fonctionnalites en taches elementaires. Pour ce faire, nous partageons 1' application en 
differents niveaux de difficulte croissante. 

L etude etape par etape de l'ensemble de cet ouvrage va nous permettre de realiser cette 
application. Elle integrera en fin de chaque chapitre les etapes de « Conception/develop- 
pement » et « Implementation/tests ». 

Ainsi pour commencer, nous verrons au chapitre 2 comment definir et representer les 
objets utiles et necessaires pour realiser une telle application. 
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Memento 

• L'instruction : 

var positionEnX: Number = 2; 

definit une variable nominee positionEnX de type numerique, contenant la valeur 2. 

• L'instruction : 

var mot:String = "Bonjour"; 

declare une variable nommee mot contenant la suite de caracteres "Bonjour". Cette 
variable est de type String. 

• La commande : 

trace(" x > " + positionEnX); 

affiche dans la fenetre de sortie le contenu de la variable positionEnX precede du 
commentaire x >. 

• Les instructions : 

a = l : 
a = 3; 

sont executees de haut en bas. Ainsi, la valeur initiale de a ( 1 ) est effacee et ecrasee par 
la valeur 3. 

• La suite des instructions : 

n = 4; 
p = 5*n+l; 

place la valeur 4 dans la variable n. Lexpression 5 * n + 1 est ensuite calculee. 
Le resultat est enfin range dans la variable representee par p. 

• L'instruction : 
a = a + 1; 

est une instruction decrementation. Elle permet d'augmenter de 1, la valeur contenue 
dans la variable a. 

• La suite des instructions : 

tmp = a; 
a = b; 
b = tmp; 

a pour resultat d'echanger les contenus des variables a et b. 

• Les instructions : 

var motl:String = "Le mystere "; 
var mot2:String = "de la chambre jaune"; 
var titre:String = motl + mot2; 

placent la chaine de caracteres contenue dans mot2 a la suite de motl, dans la chaine 
nommee titre. 
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• Dans 1' instruction : 

var phrase :String = "Agent secret " + 707; 

ActionScript convertit le chiffre 707 en chaine "707" et l'ajoute a la fin de la suite de 
caracteres "Agent secret ". La variable phrase contient la chaine "Agent secret 707". 



Exercices 

Reperer les instructions de declaration, observer la syntaxe 
d'une instruction 

Exercice 1.1 

Observez ce qui suit, et indiquez ce qui est ou n'est pas une declaration et ce qui est ou 
n'est pas valide : 

var i :Number = 210; 
var valeur: Number = 320; 
var limite - j = 1024; 
var val:Number = tmp / 16; 
var j + 1: Number; 
var var:Number = 10; 
var i :String ="cent" ; 
var A:Number = i / 2; 
var X:Number = i + 2; 



Comprendre le mecanisme de I'affectation 
Exercice 1 .2 

Quelles sont les valeurs des variables A, B, C apres l'execution de chacun des extraits de 
programme suivants ? 







A =3.5; 


A =0.1; 


B =1.5; 


B =1.1; 


C =A +B; 


C =B; 


B =A +C; 


D =A +1; 


A = B; 


A = D +C; 



Comprendre le mecanisme d'echange de valeurs 
Exercice 1 .3 

Dans chacun des cas, quelles sont les valeurs des variables a et b apres l'execution de 
chacune des instructions suivantes ? 



1. 




2. 






a =255 
b =360 
a =b 
b=a 




a =255 
b =360 
b =a 
a =b 
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Exercice 1 .4 

Laquelle des options suivantes permet d'echanger les valeurs des deux variables a et b ? 
Pour vous aider, supposez que a et b sont initialisees a 100 et 200 respectivement. 

a = b; b = a; 
t=a;a=b;b=t; 
t = a; b = a; t = b; 

Exercice 1 .5 

Quel est l'effet des instructions suivantes sur les variables a et b (pour vous aider, initialisez 
a a 2 et b a 5) ? 

a = a + b; 
b = a - b; 
a = a - b; 

Exercice 1 .6 

Soient trois variables a, b et c. Ecrivez les instructions permutant les valeurs, de sorte que 
la valeur de b passe dans a, celle de c dans b et celle de a dans c. N'utilisez qu'une (et une 
seule) variable entiere supplemental, nommee tmp. 

Calculer des expressions 
Exercice 1 .7 

Donnez la valeur des expressions suivantes, pour n = 10, p = 3, r = 8, s = 7, t = 21 et 
x = 2.0 : 



a. 








b. 
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Comprendre les operations de sortie 
Exercice 1 .8 

Soit un programme ActionScript contenant les declarations : 

var i :Number = 223; 
var j :Number = 135; 
var a:Number = 1.5; 
var RiString = "T"; 
var T:String = "R"; 

traceCLa fenetre est placee en x : " + i + " et en y : "+ j ) ; 
traceC avec le coefficient "+ a + " le depl acement : "+ a * i + j); 
tracer La variable R = " + R + " et T = " + T) ; 
tracer T + R = " + T + R); 
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Exercice 1 .9 



Ecrivez les instructions trace( ) de facon a obtenir les deux fenetres de sortie suivantes, 
lorsque xx = 4 et yy = 2 ou lorsque xx = 9 et yy = 3 : 



Figure 1-16 

Le residtat est affiche 
dans lafenetre de sortie. 







X 


Ij Sortie x | Erreurs de compilation [ 


xx = 4 et yy = 2 






Racine carree de 4 = 2 






4 a la puissance 2 = 16 

L 




▼ 













X 


| Sortie x | Erreurs de compilation 


xx = 9 et yy = 3 






Racine carree de 9 = 3 






9 a la puissance 3 = 729 




▼ 









Remarque 

Notez que la racine carree de x s'obtient par la fonction Math.sqrt(x) et que a b se calcule avec la 
methode Math.pow(a.b). 



2 

Les symboles 



Programmer avec Flash, c'est, nous l'avons vu en introduction, associer des elements 
graphiques avec des instructions du langage ActionScript. En effet, une animation 
programmed sous Flash est composee d'elements se deplacant selon des trajectoires 
calculees a l'aide d' expressions mathematiques ou encore reagissant aux actions de 
l'utilisateur. 

Chaque element doit done etre reconnu par Flash comme un element particulier, different, 
par son comportement, des autres objets graphiques places sur la scene. 

Comme pour les variables, la seule facon de distinguer un element graphique d'un 
autre est de lui donner un nom. Pour realiser cette operation, nous devons transformer 
les elements graphiques en symboles. Flash propose trois types de symboles. Nous 
etudierons en section « Les differents types de symboles » comment creer chacun d'entre 
eux. 

La notion de symbole decoule directement de la programmation objet. Nous examine - 
rons, au cours de la section « Creer un objet a partir d'un symbole », chacun des concepts 
associes a ce mode de programmation. Au cours de la partie « Proprietes et methodes 
d'un objet », nous preciserons le fonctionnement d'un symbole au sein d'un programme 
ecrit en ActionScript. 

Les differents types de symboles 

L'environnement Flash propose un ensemble d'outils permettant de creer des elements 
graphiques plus ou moins elabores suivant le savoir-faire de l'utilisateur. Ces elements ne 
restent que de simples dessins composes de matieres (couleur, texture, bords...) tant que 
le concepteur ne les transforme pas en symboles. 

En effet, ActionScript ne sait pas afficher, deplacer ou transformer un dessin, si ce dernier 
n'est pas decrit sous la forme d'un symbole. 
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Creer un symbole 

II existe deux facons de creer un symbole : soit en transformant un dessin en symbole, 
soit en creant un symbole vide dans lequel on place un dessin. 

Transformer un dessin en symbole 

Votre dessin se trouve sur la scene et il est constitue de matieres (couleurs, traits. . .). Pour 
le transformer en symbole, il suffit de le selectionner, puis de taper sur la touche F8 de 
votre clavier, ou encore de derouler le menu Insertion et de selectionner l'item Convertir 
en symbole. 

La boite de dialogue illustree par la figure 2-1 apparait. 



Figure 2-1 

La boite de dialogue 
Convertir en symbole 
apparait en tapant sur 
la touche F8 de votre 
clavier. 



Convertir en symbole 



Norn : |AgneauClp| 



Comporternent : 



0 Clip 
(~ Bouton 
f~ Graphique 



Alignement : °°° 
□□□ 



Avance 



OK 
Annuler 



Aide 



Cette boite de dialogue est utile pour definir les caracteristiques du symbole, a savoir son 
nom, son comporternent ainsi que son point d' alignement. 

• Dans la zone Nom, tapez le nom que vous souhaitez attribuer au symbole. 



Remarque 

Tout comme pour les variables, il est conseille de donner un nom s ign ificatif a chaque symbole cree. 
Evitez de garder symbol el, symbol e2... proposes par defaut. II est beaucoup plus facile de rechercher 
un symbole parmi une centaine d'autres lorsque son nom permet de I'identifier rapidement. 



• Dans la zone Comporternent, selectionnez l'option Clip, Bouton ou Graphique selon le 
type de symbole que vous souhaitez creer. Les differents types de symboles sont 
decrits en detail par la suite. 

• Sur la zone Al ignement, vous pouvez choisir le point d'ancrage du symbole. Le choix 
du point d' alignement (rectangle noir) definit la position du point d'origine d'un 
symbole. Cette origine est utilisee lors d'un affichage par une instruction en Action- 
Script ou pour effectuer une rotation ou encore un deplacement. Par defaut, ce point 
est place au centre. 

Les caracteristiques du symbole sont enregistrees apres validation de la boite de dialo- 
gue. Le symbole apparait alors sur la scene, encadre par un rectangle dont les bords sont 
bleus, englobant l'integralite du dessin. Une croix represente le point d'ancrage du 
symbole. 

Si vous souhaitez modifier le symbole, double-cliquez a l'interieur de la zone rectangu- 
laire. Vous n'etes plus alors sur la scene principale, mais sur la scene du symbole comme 
le montre la barre de titre de la scene (voir figure 2-2). Vous disposez d'une ligne de 
temps propre au clip dans lequel vous vous trouvez. 
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Figure 2-2 

Fenetre d' edition 
du symbole 
AgneauClp 
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x Images-cle 

t « o S [■'■ 1 10.0 ps OOs 1} 



— Majencc 1 3 AcneauClip 



Barre de titre 




Vous pouvez alors modifier votre symbole en travaillant de la meme facon que si vous 
etiez sur la scene principale. Pour revenir sur cette derniere, il vous suffit de cliquer sur 
l'icone Sequence 1 situee dans la barre de titre de la scene (voir figure 2-2). 



Remarque 

Si les elements graphiques situes sur la scene principale sont disposes surplusieurs caiques, alors ceux- 
ci sont places, lors de la transformation en symbole, sur un seul et unique caique. La perte de ces diffe- 
rents caiques peutetre une source d'inconvenients lorsque vous souhaitez modifier un element du dessin. 



Creer un symbole vide 

Pour eviter la perte des caiques lors de la transformation d'un dessin en symbole, il est 
preferable de creer un symbole a partir d'une fenetre vide. Pour cela, tapez sur les 
touches Ctrl + F8 (PC) ou Cmd + F8 (Mac), ou alors deroulez le menu Insertion et selec- 
tionnez l'item Nouveau Symbole. 

La boite de dialogue de la figure 2-3 apparait. 



Figure 2-3 

La boite Creer un 
symbole apparait 
en tapant sur les 
touches Ctrl + F8 
de votre clavier. 



Icreer un symbole 


2U 




Norn : |AgneauClp 


OK 


Compottement : (T Clip 

C" Bouton 

C" Graphique i 

Avance 


Annuler 


Aide 
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Cette boite de dialogue est utilisee pour definir les caracteristiques du symbole, a savoir 
son nom, son comportement. 

• Dans la zone Nom, tapez le nom que vous souhaitez attribuer au symbole. 

• Dans la zone Comportement, selectionnez l'option Clip, Bouton ou Graphique, selon le 
type de symbole que vous souhaitez creer. Les differents types de symboles sont 
decrits en detail ci-apres. 

Apres validation, vous pouvez travailler directement sur la scene du symbole, en utilisant 
les caiques et les differents outils de dessin. 



Remarque 

Au centre de la scene associee au symbole, figure une croix representant le point de reference du 
symbole. E I le definit le point origine utilise lors d'un affichage par une instruction en ActionScript. 



Symbole de type Clip 

Le symbole de type CI ip est egalement appele « clip d' animation » ou encore en anglais 
movie clip. II est le type de symbole le plus utilise lorsque Ton utilise l'environnement 
Flash pour creer un symbole. II permet de rassembler sous un meme nom une animation 
a part entiere, ayant son propre scenario. II s'obtient en choisissant le comportement CI i p 
dans les boites de dialogue Creer un symbole ou Convertir un symbole (voir figures 2-1 
et2-3). 



Remarque 

Dans cet ouvrage, nous choisissons, par convention, de donner la terminaison « C I p » a tous les 
symboles de type Clip que nous aurons a creer. 



Un clip d' animation peut etre un oiseau qui vole, un personnage qui marche ou encore un 
element d' interface comme un menu deroulant. Un clip est autonome, il fonctionne inde- 
pendamment de 1' animation principale, s'affiche ou s' efface a des instants precis au 
cours de 1' animation principale. Chaque clip contient son propre scenario. 

Un clip peut egalement contenir du son, des images ou de la video. 
Exemple : I'agneau 

Examinons comment realiser un clip representant un agneau qui marche. Pour vous 
simplifier la tache, nous avons place les images-cles de ce mouvement dans le fichier 
Exemples/chapitre2/AgneauImagesCle.fla (cf. extension web). 

Creation du symbole 

Nous allons creer un symbole vide de type Clip, nomme AgneauClp, en tapant sur les 
touches Ctrl + F8 de votre clavier. 

Pour realiser notre animation, nous devons etre en possession de plusieurs images qui 
simulent le mouvement de marche de l'animal. Chacune de ces images s'appelle 
une image-cle. Symboliquement, une image-cle est representee, sur la ligne de temps, 



Les symboles 
Chapitre 2 | 

par une cellule avec une pastille noire ou blanche (voir figures 2-2 et 2-4). Si la pastille 
est blanche, cela signifie que 1' image est vide (aucun symbole ni dessin n'est place sur 
cette image). 



Remarque 

La ligne de temps (timeline, en anglais) est constitute d'une suite de cellules. Chaque cellule represents 
une image-cle ou une image intermedia ire. Une image-cle est une image construite par le developpeurou 
le graphiste, alors qu'une image intermediate est definie etcalculee par Flash. Les images-cles sont 
utilisees pour positionnervos dessins, definir leurtaille, leurcouleur, etc. 



Insertion des images-cles 

Pour inserer une image-cle, dans le clip, vous devez : 

• selectionner une cellule sur la ligne de temps ; 

• taper sur la touche F6 de votre clavier ou encore derouler le menu Insertion et selec- 
tionner l'item Image-cle. 

Ensuite, vous pouvez soit dessiner votre propre image, soit copier l'image-cle n° 1 du 
fichier Exempl es/chapi tre2/AgneauImagesCl e.fl a. 

Apres avoir copie la premiere image dans l'image-cle n° 1 du clip AgneauCl p, selectionnez la 
cellule n° 2 sur la ligne de temps, tapez sur la touche F6 de votre clavier pour creer l'image- 
cle n° 2 et copiez la seconde image-cle du fichier Exemples/chapitre2/AgneauImagesCle.fla. 
Repetez cette operation pour les 6 images-cles suivantes. 

Les 8 images-cles que vous venez de creer correspondent aux 8 mouvements cles 
simulant le mouvement de marche de l'agneau. Apres avoir realise l'ensemble de ces 
operations, votre clip d'animation AgneauCl p doit avoir une ligne de temps telle que le 
montre la figure 2-4. 
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Figure 2-4 

La ligne de temps du clip d'animation AgneauClp est composee de 8 images-cles. 



Controle du clip AgneauClp 

Pour verifier le bon fonctionnement du clip, vous devez : 

• Revenir sur la scene principale, en cliquant sur Sequence 1 dans la barre de titre de la 
scene. 

• Afficher le panneau Bibliotheque en tapant sur la touche Fl 1 de votre clavier. 
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• Selectionner le clip d'animation AgneauClp dans le panneau Bibliotheque et le tirer a 
l'aide de la souris sur la scene principale. Ce faisant, vous venez de creer une instance, 
une occurrence (copie) du clip AgneauCl p. 

• Lancer la lecture de 1' animation en tapant sur les touches Ctrl + Entree (PC) ou 
Cmd + Entree (Mac). 



Extension web 

Vous trouverez cetexemple dans le fichier ClipAnimationAgneau.fla, sous le repertoire Exemples/ 
chapitre2. 



Remarque 

Lorsque I'instance du clip copie sur la scene estselectionnee, observez le panneau Proprietes (voirfigures 2-5). 
Grace a ce panneau, nous pouvons verifier le nom du symbole auquel appartient I'occurrence, modifier 
eventuellementson comportementet lui donner un nom. 




Figure 2-5 

Panneau Proprietes d'un symbole de type Clip. 



A la lecture de l'animation, nous constatons que l'agneau est anime, mais il reste sur 
place. Pour simuler un deplacement, nous devons, par exemple, deplacer le clip de la 
gauche vers la droite afin de donner 1' illusion que l'agneau marche vers la droite. Ce type 
de mouvement est tres facilement realisable en ActionScript. Nous l'etudierons en 
section « Les evenements lies au temps » du chapitre 3, « Communiquer ou interagir ». 
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Symbole de type Bouton 

Le symbole de type Bouton permet de creer l'interaction entre l'utilisateur et l'animation. 
II permet, par exemple, de lancer d'un simple clic une animation ou un son. 

Le symbole de type Bouton est tres different des autres types de symboles. Son comportement 
est entierement dependant de la position du curseur de la souris. Trois etats le decrivent : 

• Le premier etat correspond a l'etat normal, lorsque aucune action n'est realisee sur le 
bouton. 

• Le second correspond a l'etat du bouton lorsque le curseur de la souris passe sur le 
bouton (en anglais cet etat s'appelle le rollover). 

• Le troisieme et dernier etat est celui oil Ton clique sur le bouton. 

Pour decrire chacun de ces comportements, le symbole de type Bouton possede un scenario 
tres particulier, compose de quatre images-cles (voir figure 2-6). 
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Figure 2-6 

La ligne de temps du symbole Bouton est composee de 4 images-cles. 

Ces trois etats sont decrits par les cellules Haut, Dessus, et Abaisse. Chacune d'entre elles 
correspond a une image-cle sur la ligne de temps. En derniere position se trouve 1' image - 
cle nommee Cliquable. Elle permet de definir la zone cliquable du bouton. Lorsque le 
curseur de la souris se trouve sur cette zone, ce dernier change de forme. La zone cliquable 
peut etre plus grande ou plus petite que la forme du bouton. 



Exemple : fabriquer un bouton Lecture 

Examinons comment realiser le bouton de lancement de la lecture d'une animation. Pour 
vous simplifier la tache, nous avons place les images-cles de ce bouton dans le fichier 
Exemples/chapitre2/LectureImagesCle.fla (cf. extension web). 

Creer le symbole LectureBtn 

Le symbole LectureBtn est cree en tapant sur les touches Ctrl + F8, lorsque nous nous 
trouvons sur la scene principale (Sequence 1). Apres avoir selectionne le comportement 
Bouton dans la boite de dialogue Creer un symbole et l'avoir nomme LectureBtn, validez 
afin d'entrer dans la fenetre d'edition du symbole (figure 2-7). 



Figure 2-7 

La boite de dialogue Creer 
un symbole permet de creer 
un symbole de type Bouton, 
nomme LectureBtn. 



Creer un symbole 
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Remarque 

Dans cetouvrage, nous choisissons par convention, de donner la terminaison « Btn » a tous les symboles 
de type Bouton que nous aurons a creer. 
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L'image-cle Haut 

Sur la ligne de temps, le curseur est positionne sur la premiere image-cle nommee Haut. 
Sur cette image est placee la forme du bouton dans son etat initial, lorsque aucune 
action n'est realisee. Nous vous proposons de creer un bouton dont la forme est la 
suivante (voir figure 2-8) : 

Figure 2-8 

» a □! Haut | Dessus |Abaisse| Clique | 



Forme du bouton 
au repos 




L'image-cle Dessus 

Pour creer la forme du bouton lorsque le curseur de la souris survole le bouton, nous 
devons creer une nouvelle image-cle dans la cellule Dessus. Pour cela, selectionnez cette 
derniere et tapez sur la touche F6 de votre clavier, ou deroulez le menu Insertion et selec- 
tionnez l'item Image-cle. 

La forme du bouton de l'image Haut est automatiquement copiee sur la cellule Dessus. 
Le bouton, au moment du survol de la souris, est de la meme forme qu'a l'etat initial. 
II change simplement de couleur. Nous vous proposons de modifier uniquement les 
couleurs du bouton comme sur la figure 2-9. 



Figure 2-9 

Le bouton change de 
couleur lorsque le 
curseur de la souris 
passe dessus. 
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L'image-cle Abaisse 

Sur l'image Abaisse, est placee la fonne du bouton lorsque l'utilisateur clique sur le 
bouton de la souris. Pour creer cette image, nous allons proceder comme pour l'image 
Dessus, en creant une image-cle sur la cellule Abaisse. Pour cela, tapez sur la touche F6 de 
votre clavier ou deroulez le menu Insertion et selectionnez l'item Image-cle. 

La forme du bouton de l'image Dessus est automatiquement copiee sur la cellule Abai sse. 
Le bouton, au moment du clic de la souris, est de la meme forme qu'a l'etat Dessus. Pour 
donner l'impression que le bouton s'enfonce au moment du clic, nous allons decaler le 
bouton vers le bas et la droite de quelques pixels, et rendre plus foncee la couleur de 
l'interieur du triangle, comme le montre la figure 2-10. 



Figure 2-10 

Le bouton change de 
couleur et se decale 
vers le bas lorsque 
l'utilisateur clique 
dessus. 
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L'image-cle Cliquable 

La zone Cliquable correspond a la zone sensible du bouton. Cette zone peut etre plus 
grande ou plus petite que la forme du bouton. Sur cette zone, le curseur change automa- 
tiquement de forme. II devient une main dont l'index pointe sur le bouton. 

Dans notre exemple, nous choisissons de prendre, comme zone cliquable, le triangle inte- 
rieur du bouton. Pour cela, nous devons creer une image-cle en tapant sur la touche F6 du 
clavier, apres avoir selectionne la cellule CI iquabl e ou encore en deroulant le menu Insertion 
et en selectionnant l'item Image-cle. 

La forme du bouton de l'image Abaisse est automatiquement copiee sur la cellule CI iquabl e. 
Pour obtenir, comme zone cliquable, le triangle interne au bouton, il nous reste a supprimer 
les bords du triangle, comme le montre la figure 2-11. 



Figure 2-11 

La zone cliquable 
correspond au triangle 
interieur du bouton. 
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Controle du bouton LectureBtn 

Pour verifier le bon fonctionnement du bouton, vous devez : 

• Revenir sur la scene principale, en cliquant sur Sequence 1 dans la barre de titre de la 
scene. 

• Afficher le panneau Bibliotheque en tapant sur la touche Fl 1 de votre clavier, s'il n'est 
deja affiche. 

• Selectionner le bouton LectureBtn dans le panneau Bibliotheque et le tirer a l'aide de la 
souris sur la scene principale. Ce faisant, vous venez de creer une instance, ou encore 
occurrence (copie) du bouton LectureBtn. 

• Lancer la lecture de 1' animation en tapant sur les touches Ctrl + Entree (PC) ou 
Cmd + Entree (Mac). 



Extension web 

Vous trouverez cet exemple dans le fichier BoutonLecture.fla, sous le repertoire Exemples/ 
Chapitre2. 



Remarque 

Lorsque I'instance du bouton copiee sur la scene estselectionnee, observez le panneau Proprier.es (voir 
figure 2-12). Grace a ce panneau, il est possible de verifier le nom du symbole auquel appartient Incur- 
rence, de modifier eventuellement son comportement et de lui donner un nom. 
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Figure 2-12 

Panneau Proprietes d'un symbole de type Bouton 
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L' animation lancee, observez les differents etats du bouton de lecture, les changements 
de couleur ainsi que l'effet d'enfoncement du bouton par decalage de sa forme. Notez 
egalement que le bouton et le curseur de la souris ne changent de forme que lorsque ce 
dernier se trouve a l'interieur du bouton, dans la zone cliquable. 

L' animation du bouton fonctionne correctement. Mais pour l'instant, il ne lance aucune 
animation. Nous verrons au chapitre 3, « Communiquer ou interagir », comment associer 
des actions aux boutons, en utilisant des instructions en ActionScript. 



Le symbole de type Graphique est le type le moins employe dans l'environnement Flash. 
II est utilise pour les elements graphiques fixes et repetes. Les elements de decor ou 
d'interface sont typiquement des dessins que Ton doit transformer en symbole Graphique. 

Ce type de symbole s'obtient en selectionnant le comportement Graphique dans les boites 
de dialogue Creer un symbole ou Convertir un symbole (voir figures 2-1 et 2-3). 



Remarque 

Dans cet ouvrage, nous choisissons, par convention, de donner la terminaison « Grq » a tous les 
symboles de type Graphique que nous aurons a creer. 



La fenetre d'edition d'un symbole graphique est identique a celle d'un symbole de type 
CI ip. Le symbole graphique etant utilise pour des images statiques contenant un simple 
dessin, la ligne de temps associee au symbole ne contient qu'une seule image-cle. Cependant, 
rien n'interdit de placer plusieurs images a l'interieur d'un symbole graphique. 

La seule vraie difference entre un symbole graphique et un clip est qu'il n'est pas possi- 
ble de donner un nom a une instance de graphique (voir figure 2-15). Un graphique ne 
peut done pas etre utilise par une commande ActionScript. 



Symbole de type Graphique 




Figure 2-13 



Panneau Proprietes d'un symbole de type Graphique 
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La question se pose de savoir pourquoi utiliser un tel type de symbole. En realite, les 
symboles de type Graphique permettent d'alleger le poids des animations et de faciliter 
leur mise a jour. 

Faciliter les modifications 

Un site Internet ecrit en Flash contient un tres grand nombre d'elements graphiques constants. 
II s'agit de la charte graphique. Le logo, les boutons de navigation, les titres et sous-titres, 
le fond de la page en font partie. Leur utilisation est repetee plusieurs fois a l'interieur du 
site. 

Pour etre vivant, un site change regulierement d' allure. II s'agit alors de modifier tout ou 
partie de la charte graphique. Ce travail peut etre long et fastidieux si les elements graphiques 
sont disperses tout au long du site, sans avoir ete enregistres sous la forme de symboles 
graphiques. En effet, il faut alors rechercher chaque dessin, chaque forme a l'interieur 
des differentes images-cles composant le site. 

En decrivant les elements constants sous la forme de symboles graphiques, les change- 
ments deviennent beaucoup plus faciles. En effet, modifier un symbole a pour resultat de 
corriger toutes les copies du symbole presentes dans 1' animation. 

Ainsi, transformer la forme du logo d'un site revient non plus a rechercher toutes les images 
contenant le logo et les rectifier une a une, mais a simplement retoucher le symbole repre- 
sentant le logo. Cette modification est alors repercutee sur toutes les images contenant ce 
symbole. 

Extension web 

Vous trouverez un exemple utilisant des symboles de type Graphique dans le fichier 
BoutonLectureGrq.fla, sous le repertoire Exempl es/chapitre2. 



Creer un objet a partir d'un symbole 

Grace aux symboles, chaque dessin est enregistre sous un nom qui lui est propre. De cette 
facon, les symboles sont reutilisables a tout moment et sont entierement controlables par 
ActionScript. Utiliser des symboles au sein d'un programme apporte une grande 
souplesse et de tres nombreuses possibilites pour creer des applications ou des animations. 

Quelle difference entre un symbole et une occurrence ? 

Creer un symbole, c'est placer un dessin sous forme de modele dans la bibliotheque associee 
a 1' animation. Le symbole ainsi enregistre devient le modele de reference. 

Par exemple, le panneau Bibliotheque de l'animation BoutonLectureGrq.fla est constitue de 
quatre symboles, appeles respectivement BordLectureGrq, Fond, FondLectureGrq et LectureBtn. 

Ensuite, pour etre utilises par l'animation, les symboles doivent etre places sur la scene. 
II existe differentes techniques pour realiser une telle operation, comme nous le verrons a 
la section « Les differentes f aeons de creer des occurrences ». 

En deplacant un element de la bibliotheque sur la scene, nous creons une instance ou 
encore occurrence. II est possible de creer autant d' instances que nous le souhaitons. 

Chaque occurrence est alors un element individuel qui peut etre nomme et traite de facon 
independante par rapport aux autres. 
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Remarque 

Le panneau B ibliotheque apparait en tapant sur la touche Fll de votre clavier ou en deroulant le menu 
Fenetre eten selectionnant litem LectureBtn (voir figure 2-16). 

Figure 2-14 



La bibliotheque associee 
a I 'animation Bouton- 
LectureGrq.fla 



J Bibliotheque x ] 






| BoutonLectureGrq fHa 






4 elements 






> 


nan 


lype 






Graphique 


o 


Fend 

FondLecturcOq 

fl Lecturebtn 


CliD 

&opli«quc 

ttouton 


— 






.r 1 


*1 _i 0 5 i I 


1 



Modifier un symbole 

II existe deux facons de modifier un symbole : soit en double -cliquant sur l'objet dans le 
panneau Bibliotheque, soit en double-cliquant sur une instance de l'objet presente sur la 
scene. Ces deux methodes nous amenent sur le scenario propre au symbole. Les trans- 
formations s'effectuent a l'interieur de ce scenario, en utilisant les outils de dessin 
proposes par Flash. 

Modifier l'occurrence d'un symbole, en entrant dans le scenario propre a l'occurrence, 
revient a corriger le symbole lui-meme et done toutes les occurrences. En effet, elles sont 
toutes une copie du modele original. Si ce dernier est rectifie, alors toutes les occurrences 
presentes sur la scene le seront a leur tour. 

Par exemple, si Ton ajoute un chapeau sur la tete de l'agneau dans le clip AgneauClp, en 
double-cliquant sur une des occurrences presentes sur la scene, nous voyons apparaitre le 
chapeau sur chacune des occurrences comme le montre la figure 2-15. 



Figure 2-15 

Modifier le symbole 
entraine la modification 
de toutes les occurrences. 




Extension web 

Vous trouverez cet exemple dans le fichier Modi ficationSymbole.fi a, sous le repertoire Exemples/ 
Chapitre2. 



70 



Apprendre a programmer en ActionScript 3 



Modifier I'occurrence 

II est cependant possible de modifier une instance precise placee sur la scene, et non le 
modele, comme nous venons de le faire precedemment. Pour cela, il ne faut pas double- 
cliquer sur I'occurrence, mais simplement selectionner celle que nous souhaitons 
transformer. 

Les seules corrections possibles, pour une occurrence, sont la taille, l'orientation, la 
couleur et la transparence. Elles s'effectuent de facon independante, d'une instance a 
1' autre. 

Pour changer la taille ainsi que l'orientation, il convient d'utiliser l'outil de transforma- 
tion propose dans la boite a outils. Pour la couleur et la transparence, vous devez selec- 
tionner les menus appropries dans le panneau Proprietes de l'instance (voir figure 2-16). 




Figure 2-16 

Le panneau Proprietes permet de modifier la couleur de I'occurrence selectionnee. 

Par exemple, nous pouvons obtenir des agneaux de taille, de couleur et d'orientation 
differentes, comme le montre la figure 2-17. 

Figure 2-17 

La taille, l'orientation 
et la couleur des 
occurrences peuvent 
etre modifiees 
separement. 




Remarque 

Les transformations telles que le changement d'echelle, la transparence ou encore la rotation sont tres 
facilement realisables par programme. Pour cela, reportez-vous a la section « Proprietes et methodes 
d'un objet » ci-apres. 



Les symboles I 
Chapitre 2 | 

Les differentes fagons de creer des occurrences 

Chaque occurrence creee sur la scene peut etre traitee de facon individuelle. Pour cela, il 
est necessaire de les distinguer en les nommant. En effet, donner un nom a une occur- 
rence offre l'avantage de pouvoir l'utiliser par son nom, a tout moment dans le deroulement 
de 1' animation. 

La facon de donner un nom differe en fonction du mode de creation de l'occurrence. 
Vous pouvez creer de nouvelles occurrences de deux manieres : la premiere s'effectue 
manuellement, a l'aide de l'environnement Flash et la seconde est realisee par 
programme. 



Remarque 

Donner un nom a une instance est une des operations les plus importantes dont il faut absolument se 
souvenir si vous souhaitez animer des objets a l'aide de programmes ecrits en ActionScript. 



Creer et nommer une occurrence manuellement 

La creation manuelle d'une occurrence de symbole s'effectue en selectionnant le 
symbole dans le panneau Bibliotheque et en le faisant glisser sur la scene a l'aide de la 
souris. 

L'occurrence ainsi creee doit etre nommee manuellement a l'aide du panneau Proprietes, 
dans le champ Nom de 1 'occurrence (voir figures 2-6 et 2-12). 



Remarque 

Le choix du nom d'une occurrence s'effectue selon les memes contraintes que pour celui des variables 
(voir Chapitre 1, « Traiter les donnees », section « Donner un nom a une variable »). 



Exemple 



Extension web 

Vous trouverez cet exemple dans le fichier AgneauNomOccurrence.fi a, sous le repertoire Exemples/ 
Chapitre2. 



Ainsi, pour creer une instance nommee Brebis a partir du symbole AgneauClp, il vous 
faut : 

• Selectionner le symbole AgneauClp dans le panneau de l'animation AgneauNomOccur- 
rence.fl a. 

• Glisser le symbole sur la scene. 

• Selectionner l'occurrence ainsi placee sur la scene et ouvrir le panneau Proprietes 
associe, si ce n'est pas deja fait. Vous pouvez egalement utiliser le raccourci clavier 
Ctrl + F3 (PC) ou Cmd + F3 (Mac). 

• Dans le champ Nom de 1 'occurrence, taper le mot Brebis, comme le montre la figure 2-18. 
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Figure 2-18 

Le nom de V occurrence 
est defini manuellement 
a I 'aide du panneau 
Proprietes associe d 
V occurrence. 




Remarque 

Donner un nom a un symbole et donner un nom a I'occurrence du symbole sont deux actions totalement 
differences. Le symbole est le modele alors que I'occurrence est la copie de ce modele. Bien que cela soit 
possible, il est deconseille de donner un nom identique au symbole et a I'occurrence. 



Ainsi nominee grace au panneau Proprietes, I'occurrence Brebi s peut etre traitee, sous ce 
nom, par un programme ecrit en ActionScript. 

Creer une occurrence par programme 

Le langage ActionScript 3.0 propose differentes methodes pour creer des occurrences de 
symbole en cours de lecture de 1' animation. La premiere methode decrite ci-apres, 
demande a ce que le symbole soit present dans la bibliotheque. La seconde permet de 
creer des objets graphiques directement par programme sans avoir a les dessiner « a la 
main ». Ces objets ne sont pas enregistres dans la bibliotheque. 

Creer une occurrence a partird'un objet defini dans la bibliotheque 

Pour creer une occurrence par programme, il convient de rendre visible le symbole enre- 
gistre dans la bibliotheque, en l'exportant vers ActionScript. Pour cela, nous devons 
suivre les etapes suivantes : 

• Selectionner le symbole a exporter dans le panneau Bibliotheque. 

• Choisir l'item Liaison dans le menu contextuel qui s'affiche par un clic droit (PC) ou 
en tapant le raccourci Ctrl + clic (Mac) sur le symbole selectionne. La boite de 
dialogue Proprietes de liaison du symbole apparait (voir figure 2-19). 

• Dans la zone Liaison, selectionner l'option Exporter pour ActionScript. 

• Dans la zone CI asse, donner un nom unique pour le symbole Clip. Ce nom est ensuite 
utilise pour ActionScript. Par defaut, Flash propose le nom du symbole lui-meme 
comme nom de classe. 



Valider votre saisie en cliquant sur OK. 
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Figure 2-19 

La boite de dialogue 
Proprietes de liaison 
permet d' exporter le 
symbole pour Action- 
Script. 
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Apres validation, l'environnement Flash avertit l'utilisateur qu'il va creer la classe associee 
au symbole exporte (voir figure 2-20). Vous pouvez cocher la case pour eviter d'afficher 
ce message, a chaque exportation de clips. 



Figure 2-20 

Flash previent l'utilisa- 
teur qu 'il cree une classe 
associee au clip. 

V Ne plus afficher cet avertissement. 

OK Annuler 



Avertissement relatif aux classes d'Actionscript 



Le chemin de classe ne contient pas de definition pour 
cette classe. Une definition sera generee 
automatiquement dans le fichier SWF lors de 
I'exportation. 



Lorsque la classe associee au symbole est enfin creee, il devient possible de definir de 
nouvelles occurrences du symbole, en utilisant la syntaxe suivante : 

var nomOccurrence:NoniDuSymbole = new NomDuSymbol e( ) ; 

Pour creer une occurrence, il suffit d'utiliser une instruction de declaration debutant par 
var, suivie du nom de l'occurrence choisie. Le type associe a cette occurrence correspond 
au nom du symbole defini dans la bibliotheque. 

La creation de l'objet est ensuite realisee par l'operateur new. Cet operateur est un 
programme natif du langage ActionScript qui cree et reserve un espace memoire suffi- 
samment grand pour stocker toutes les informations utilisees par le symbole. 

ds= Pour en savoir plus 

L'operateur new est un operateur tres connu dans le monde de la programmation objet. Son utilisation est 
detaillee au chapitre 8, « Classes etobjets ». 

Ainsi, en supposant que nous ayons exporte le symbole LectureBtn sous ce nom, les 
instructions suivantes : 

var Li re: LectureBtn = new LectureBtnC ) ; 
Lire.x = 400; 
Lire.y = 300; 
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construisent une nouvelle occurrence a partir d'un symbole existant dans la bibliotheque. 
Elles creent une nouvelle instance nominee Li re a partir du symbole LectureBtn. 

Le bouton est ensuite place a 400 sur l'axe horizontal et a 300 sur l'axe vertical. 

Cela fait, si vous controlez le bon fonctionnement de 1' animation en tapant sur les 
touches Ctrl + Entree (PC) ou Cmd + Entree (Mac), vous constaterez que le bouton Li re 
ne s'affiche pas. 

Pour voir le bouton s'afficher sur la scene, il convient d'utiliser ensuite la methode 
addChilcK ) de la facon suivante : 

addChild(Lire); 

La methode addChi 1 d( ) est egalement une methode native du langage ActionScript qui a 
pour tache d'ajouter l'objet place entre parenthese a la liste d'affichage pour qu'il appa- 
raisse a l'ecran. 

En realite, le lecteur Flash s' execute en deux temps et ce, de facon transparente pour 
l'utilisateur. Dans un premier temps, il execute le code en creant tous les espaces 
memoire necessaires au bon fonctionnement de 1' application (creation de variables, 
operateur new, etc.). II s'occupe ensuite de l'affichage des objets sur la scene. Cette 
seconde etape est realisee par 1' intermediate de la methode addChi 1 d( ). 



Extension web 

Vous trouverez cetexemple dans le fichier BoutonLectureAddChild.fi a, sous le repertoire Exemples/ 
Chapitre2. 



Vous remarquerez que la scene de l'espace de travail de l'environnement Flash est tota- 
lement vide et que lorsque 1' animation est lancee, le bouton Lire apparait, comme par 
magie ! 

Creer une occurrence d'un objet qui n'existe pas dans la bibliotheque 

Le langage ActionScript 3.0 definit de nouvelles classes d'affichage plus legeres que la 
classe MovieClip. Parmi celles-ci, deux sont interessantes pour leur simplicite d'utilisation. 
Ce sont les classes Shape et Sprite. 

• La classe Shape contient une propriete graphics qui permet le dessin de lignes, de 
cercles, de zones de remplissage, etc. Elle ne peut etre utilisee ni pour intercepter des 
evenements, ni pour contenir d'autres occurrences de symbole. En ce sens, elle est 
plus proche du symbole de type Graphique que de MovieCl ip. 

• La classe Spri te est identique a la classe Shape. Elle integre cependant la possibility de 
traiter les evenements clavier ou souris. La classe Sprite peut contenir d'autres occur- 
rences de symbole. Elle peut etre vue comme un clip ne contenant qu'une seule 
image-cle, c'est-a-dire un clip sans scenario. 

L'exemple suivant montre comment creer un cercle de type Shape et un carre de type 
Sprite (voir figure 2-21). 
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Figure 2-21 

Le carre orange 
est legerement trans- 
parent et s 'affiche 
au-dessus du cercle. 




La creation d'un objet de type Sprite ou Shape s'effectue par 1'intermediaire d'une decla- 
ration d'objet a l'aide du mot-cle var, suivi du nom de l'objet et de son type. 

var nomObjet:Shape = new ShapeO; 

ou 

var nomObjet: Sprite = new SpriteO; 
Ainsi, un objet nomme carre, de type Sprite, sera cree en memoire grace a l'instruction : 

var carre:Sprite = new SpriteO ; 
et un objet nomme cercl e, de type Shape, sera cree grace a l'instruction : 

var cercle:Shape = new ShapeO ; 
Le dessin de la forme carree ou du cercle s'effectue par 1'intermediaire de : 

• la propriete graphics des types Sprite et Shape ; 

• des methodes begi nFi 1 1 ( ) et endFi 1 1 ( ) pour determiner la couleur des objets ; 

• des methodes drawCi rcl e( ) et drawRect( ) pour dessiner la forme souhaitee. 

ds= Pour en savoir plus 

Les termes « propriete » et « methode » sont issus de la programmation orientee objet. Leur uti lite et leur 
fonctionnement sont detailles au cours des chapitres 8, « Les classes et les objets », et 9, « Les prlncipes 
du concept objet ». 

Le programme se presente sous la forme suivante : 

//Creation de 1 'occurrence "cercle" de type "Shape" 

var cercle:Shape = new ShapeO ; 

//© Remplir le cercle avec une couleur 

cercle. graphics. begi nFi 1 1 (0x57DBB3) ; 

//© Definition de la position et de la taille du rayon 

cercle. graphics. drawCircleOOO, 200, 50); 

//© Cesser de remplir 

cercle. graphics. endFi 11 (); 

//© Afficher le cercle 

addChild(cercle) ; 
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//Creation de 1 'occurrence "carre" de type "Sprite" 

var carre:Sprite = new SpriteO ; 

//© Remplir le cercle avec une couleur 

carre. graphi cs. begi nFi 1 1 (0xFBCD15, 0.8) ; 

//© Definition de la position et de la taille du carre 

carre. graphics. drawRect(325, 150, 100. 100); 

/ /© Cesser de rempl i r 

carre. graphi cs.endFi 11 ( ) ; 

//© Afficher le cercle 

addChild(carre) ; 



Extension web 

Vous trouverez cet exemple dans le fichier ShapeEtSprite.fi a, sous le repertoire Exemples/ 
Chapitre2. 

© La methode begi nFi 1 1 ( ) est utilisee pour definir la couleur d'affichage de l'objet a 
dessiner. La valeur passee en premier parametre est une valeur hexadecimale composee 
de 6 lettres (RRVVBB) precedee des caracteres Ox afln de preciser qu'il s'agit bien d'une 
valeur hexadecimale. 

Les deux premieres valeurs (RR) derinissent la quantite de rouge, les secondes (VV) la 
quantite de vert et les troisiemes (BB) la quantite de bleu. Les quantites de couleur varient 
elles-memes de 00, pas de couleur, a FF, le maximum de couleur. Ainsi, la valeur FF0000 
correspond au rouge maximal, la valeur 00FF00 au vert maximal et 0000FF au bleu maxi- 
mal. La meme quantite de rouge, de vert et de bleu donne un gris plus ou moins fonce 
selon la quantite de couleur. Ainsi, 000000 donne du noir (pas de couleur du tout), 999999 
un gris moyen et FFFFFF du blanc (quantite maximale de couleur) . 

Pour notre exemple, la valeur 0x57 DBB3 correspond a une couleur bleu-vert. 



Remarque 

Vous trouverez la valeur hexadecimale d'une couleur en affichant le panneau Melangeur (Maj +F9). 
Lorsque vous selectionnez une couleur a partir de ce panneau, vous voyez s'afficher sa valeur hexadeci- 
male precedee d'un #. 

Attention, le caractere # ne doit pas etre place dans la valeur passee en parametre de la fonction 
begi nFi 1 1 ( ). 

Figure 2-22 

La valeur hexadecimale 
d'une couleur est ajfichee 
dans le panneau Melangeur. 



| couleur x | Nuanciers J 
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© La methode ends Fi 1 1 ( ) indique au lecteur Flash que le remplissage de la forme peut 
etre effectue avec la couleur indiquee en parametre de la methode beginFUK) prece- 
dente. 

© La methode beginFillO peut etre appelee avec un second parametre qui indique le 
niveau de transparence (alpha) de l'objet a dessiner. La valeur alpha varie de 0 a 1. Avec 
un al pha egal a 0, l'objet dessine est totalement transparent, et s'il est egal a 1, la couleur 
est opaque. Dans notre exemple, la couleur d'affichage du second objet correspond a un 
orange (0xFBCD15) legerement transparent (al pha = 0.8). 

© La methode drawCi rcl e( ) est utilisee pour dessiner un cercle. Les deux premiers para- 
metres correspondent au centre du cercle, le troisieme au rayon. Dans notre exemple, le 
centre de l'objet nomme cercle est place a 300 pixels du bord gauche de la scene et a 
200 pixels de son bord superieur. Le rayon du cercle vaut 50. 

© La methode drawRectO est utilisee pour dessiner une forme rectangulaire. Les deux 
premiers parametres correspondent au point superieur gauche du rectangle, le troisieme a 
la largeur et le quatrieme a la hauteur. Dans notre exemple, le point superieur gauche de 
l'objet nomme car re est place a 325 pixels du bord gauche de la scene et a 150 pixels de 
son bord superieur. La forme est carree puisque la largeur est egale a la hauteur et vaut 
100 pixels. 

0 Les objets cercle et carre ne sont affiches que s'ils sont ajoutes a la liste d'affichage a 
l'aide de la methode addChi 1 d( ). 

ds= Pour en savoir plus 

Le carre est affiche sur le cercle car il est ajoute a la liste d'affichage apres le cercle. L'ordre d'empilement 
des objets depend du moment ou ils sont places dans la liste d'affichage. Les techniques permettant de 
deplacer un objet en dessous ou au-dessus d'un autre sont etudiees en fin de chapitre, a la section 
« Gestion de la liste d'affichage ». 



Proprietes et methodes d'un objet 

Le controle d'une occurrence, c'est-a-dire le deplacement, la visibility ou encore le 
moment ou celle-ci doit etre animee ou non, s' effectue a travers les notions de proprietes 
et de methodes. 

Toute instance creee et nommee (quel que soit son mode de creation) devient un objet 
controlable par des instructions du langage qui utilisent pour cela les proprietes et les 
comportements (methodes) propres au symbole. 

Un symbole de type Bouton, CI ip ou Graph i que ou encore un objet de type Shape ou Sprite, 
dispose de caracteristiques propres comme sa position a l'ecran, sa largeur ou encore sa 
hauteur. Ces caracteristiques sont traitees par l'intermediaire des proprietes de l'objet. 



Remarque 

Les symboles de type Graphique ne pouvantetre nommes manuellementdans la barre de Proprietes, ils 
ne peuventetre appeles par une instruction ActionScript. 



Un symbole possede egalement un comportement propre a son type. Un Bouton ne fonc- 
tionne pas de la meme facon qu'un Clip ou qu'un Sprite. Les methodes permettent de 
definir le comportement propre a une occurrence. 
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Proprietes 

Tout comme un etre humain possede des caracteristiques propres telles que son nom, son 
prenom, son age ou encore sa taille, les objets Flash ont des proprietes propres a leur 
type, comme la position a l'ecran, le nombre d'images contenues dans le clip, etc. 

Certaines caracteristiques sont communes a tous les types (Bouton, Clip ou Graphique), 
d'autres n'appartiennent qu'a un seul type. 

Principes de notation 

L'acces aux proprietes d'un symbole s'effectue selon une syntaxe bien precise, issue de 
la notation « a point » dont l'usage est devenu la norme en programmation orientee objet. 
Pour obtenir la valeur d'une propriete concernant une instance precise, il convient 
d'ecrire : 

NomDeL' Instance. nomDeLa Propriete 

ou : 

• le NomDeL' Instance correspond au nom defini par programme (resultat obtenu par 
l'operateur new, etc.) ou a celui indique dans le panneau Proprietes de 1' instance. 

• Le nomDeLaPropriete est celui derini par les concepteurs du langage ActionScript. 
Avant d'utiliser une propriete predefinie, vous devez verifier que vous ecrivez correc- 
tement son nom. 

Exemple 

L' expression Brebi s . x permet d'acceder a la propriete x de l'instance nommee Brebi s. La 
propriete x indiquant la position du clip sur l'axe horizontal, Brebi s . x precise oil se trouve 
l'instance Brebi s dans la largeur de l'ecran. 



Question 

Quel est le resultat de Tinstruction Brebi s.x = 50; ? 
Response 

Cette instruction n'effectue aucune modification a I'affichage. En effet, la propriete modifiee ici a pour nom 
X et non x. Cette instruction cree done une nouvelle propriete nommee X pour y placer la valeur 50. 
Pour placer I'occurrence Brebi s a 50 pixels de I'origine sur l'axe des X, il faudrait ecrire 
Brebis.x = 50; 

Proprietes communes a tous les objets de type clip, bouton ou graphique 

Les proprietes suivantes permettent le controle de l'apparence et de la position du 
symbole. 

x, y, alpha, rotation, visible, height, width, scaleX, scaleY 

Le contenu de chacune de ces proprietes est consultable et/ou modifiable en fonction de 
1' animation a realiser. 



Extension web 

Vous trouverez I'ensemble des instructions decrites dans cette section, dans le fichier 
ProprietesBrebis.fla, sous le repertoire Exempl es/Chapitre2. 
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Les proprieties x ety 

Les proprietes x et y indiquent la position du symbole sur l'axe horizontal et l'axe vertical 
respectivement. 

Par exemple, les instructions : 



ont pour effet de modifier la valeur des proprietes x et y. L' occurrence nominee Brebis 
s'affiche alors en bas, a droite de l'ecran. En effet, l'origine se situant en haut et a gauche 
de la scene, ajouter 300 pixels sur l'axe horizontal deplace l'occurrence vers la droite, et 
de meme l'ajout de 200 pixels sur l'axe vertical deplace l'occurrence vers le bas. 

cs" Pour en savoir plus 

Le systeme de coordonnees est decrit en detail dans I'introduction « A la source d'un programme », section 
« Quelles operations pour creer une animation ? » 

La propriete alpha 

La propriete al pha permet la modification de l'opacite ou de la transparence d'une occur- 
rence. Les valeurs de la propriete alpha sont comprises entre 0 (entierement transparent) 
et 1 (entierement opaque). La valeur par defaut est 1. 

Par exemple, 1' instruction : 

Brebis. alpha = 0.5; 

a pour resultat d'afficher l'occurrence Brebis avec une opacite diminuee de moitie. 
L'occurrence Brebi s est alors tres peu visible a l'ecran. Les objets d'affichage oil al pha est 
defini a 0 peuvent recevoir et traiter un evenement, meme s'ils sont invisibles. 

La propriete rotation 

La propriete rotation permet de faire tourner l'occurrence d'un symbole. Ses valeurs 
varient entre 0° et 360°. 

Par exemple, 1' instruction : 

Brebis. rotation = 10; 

a pour resultat d'afficher l'occurrence Brebis tournee de 10° dans le sens des aiguilles 
d'une montre. Le centre de rotation correspond au point d'ancrage du symbole defini lors 
de la creation de ce symbole (voir section « Creer un symbole » au debut de ce chapitre). 

La propriete visible 

La propriete visible contient une valeur booleenne (true ou false). Elle rend un objet 
visible ou invisible suivant sa valeur. 

Par exemple, l'instruction : 

Brebis. visible = false; 
a pour resultat de rendre invisible l'occurrence Brebi s. 



Brebis. x = 300; 
Brebi s.y = 200; 



80 



Apprendre a programmer en ActionScript 3 



Question 

Quel est le resultatde Instruction voitOnOuNon = Brebis. visible; ? 
Response 

Cette instruction ne modifie pas la valeurde la propriete visible. E I le permetde consulteretde recu- 
perer le contenu de la propriete, a savoir true ou fal se. II sera ainsi possible de rendre visible un objet 
invisible ou inversement, en testant le contenu de la variable voi tOnOuNon. 



i Pour en savoir plus 

Les structures de tests sont etudiees au chapitre 4, « Faire des choix ». 
Les proprieties height et width 

Les proprietes height et width representent la taille de l'objet en hauteur et en largeur 
respectivement. Elles sont mesurees en pixels. 

Par exemple, les instructions : 

trace( "Largeur : "+ Brebis. width + " pixels"); 
trace( "Hauteur : "+ Brebis. height + " pixels"); 

ont pour resultat d'afficher dans la fenetre de sortie les messages suivants : 
Largeur : 89.5 pixels 
Hauteur : 72.05 pixels 

Les proprietes width et height offrent la possibility de modifier la hauteur et/ou la largeur 
d'une occurrence en specifiant de nouvelles valeurs. Cependant, il est parfois plus simple 
d'utiliser les proprietes scaleXetscaleY pour modifier la taille d'une occurrence. 

Les proprietes scaleX etscaleY 

Les proprietes scaleX et scaleY permettent de modifier la taille de l'occurrence de facon 
proportionnelle, selon l'axe des X et celui des Y. La taille initiale d'un objet est de 1. 

Question 

En supposant que nous ayons cree deux occurrences nommees Petit et Grand, quelle instruction 
permetd'obtenir le petit agneau deuxfois plus petit que le grand, etce, quelle que soitla taille du grand ? 

Response 

En ecrivant les instructions : 

var Petit:AgneauClp = new AgneauClpO; 
var Grand:AgneauClp = new AgneauClpO; 
Petit. scaleX = Grand. scaleX / 2; 
Petit. scaleY = Grand. scaleY / 2; 

l'occurrence Petit voitsa taille diminuer de moitie par rapport a la taille de l'occurrence Grand, puisque 
Grand. scaleX et Grand. scaleY valentl par defaut. Le changementd'echelle est proportionnel en largeur 
eten hauteur, les deux proprietes scaleX etscaleY etanttoutes deux modifiees de la meme facon. 



Remarque 

En nommant les occurrences de facons distinctes, il est possible d'appliquer un traitement specifique a 
chacune d'entre elles. 
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Proprietes specifiques 

Proprietes exclusivement reservees au Clip 

Les symboles de type Clip ont des proprietes que Ton ne retrouve pas dans les autres 
types de symboles. II s'agit des proprietes liees a la ligne de temps. Les deux principales 
sont currentFrame et total Frames. Ces proprietes ne peuvent etre modifiees. 

currentFrame permet de savoir quelle est la position de la tete de lecture, a l'interieur du 
clip, lorsque celui-ci est anime. 

total Frames, quant a elle, correspond au nombre total d'images stockees dans le clip. 

Ces proprietes ne sont pas tres utiles pour l'instant, mais elles le seront avec les methodes 
que nous examinerons a la section « Methodes » ci-apres. 

Propriete des objets de type Shape ou Sprite 

La propriete des objets de type Shape et Sprite la plus utilisee est la propriete graphics, 
qui permet ensuite de faire appel aux methodes permettant raffichage de traits, de cercles 
ou de rectangles. 

Les objets de type Shape et Sprite sont colories, deplaces ou effaces par l'intermediaire de 
la propriete graphics. 

ds= Pour en savoir plus 

Toutes ces techniques sont realisees par l'intermediaire de methodes natives du langage ActionScript 3.0. 
Elles sontetudiees a la section « M ethodes » ci-apres. 

Methodes 

Si la taille et l'age sont des proprietes, c'est-a-dire les caracteristiques des etres humains, 
Taction de marcher, de parler ou de manger est la traduction de leurs comportements. 

Remarque 

Les proprietes represented des caracteristiques et sont associees a des noms. En revanche, les 
methodes reproduisent des actions et sont decrites par des verbes. 



En programmation ActionScript, les methodes ou encore les comportements correspondent 
aux actions realisees par les objets, alors que les proprietes definissent les caracteristiques 
des symboles. 

Principes de notation 

L'acces aux methodes d'un symbole s'effectue egalement en utilisant la notation « a 
point ». Pour cela, il convient d'ecrire 1' appel a une methode comme suit : 

NomDeL' Instance. nomDel_aMethode( ) 

ou : 

• Le NomDeL' Instance est le nom de l'instance defini par programme (resultat obtenu par 
l'operateur new) ou celui indique dans le panneau Proprietes de l'instance. 

• Le nomDeLaMethode( ) correspond au nom d'une methode definie par les concepteurs du 
langage ActionScript. 
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Par convention : 

• Tout nom de methode ActionScript commence par une minuscule. 

• Si le nom de la methode est compose de plusieurs mots, ceux-ci voient leur premier 
caractere passer en majuscule. 

• Une methode possede toujours des parentheses ouvrante et fermante a la fin de son 
nom d'appel. 

K3° Pour en savoir plus 

La syntaxe d'ecriture des methodes ainsi que les concepts de parametres sont detailles au chapitre 7, 
« Les fonctions ». 

Exemple 

Pour appliquer une methode a une occurrence de type Clip, il suffit de placer derriere le 
nom de l'objet, un point suivi du nom de la methode et de ses eventuels parametres 
places entre parentheses. 

Ainsi, l'expression Brebis.stopO permet d'executer la methode stopO sur l'occurrence 
Brebis. La methode stopO a pour resultat d'arreter la tete de lecture du scenario sur 
lequel elle est appliquee. Ainsi, au lancement de l'animation, le lecteur Flash affiche la 
premiere image du clip AgneauCl p et ne continue pas la lecture des images suivantes. 

Les methodes associees au Clip 

Les methodes sont utilisees pour executer des actions. Ces dernieres sont differentes en 
fonction du type du symbole. Dans ce paragraphe, nous allons plus particulierement 
etudier les methodes relatives aux symboles de type Clip. 

K3° Pour en savoir plus 

Les symboles de type Bouton ont egalement leurs propres methodes. Pourbien comprendre leur fonction- 
nement, il est necessaire d'etudier auparavant la notion d'evenements.Tous ces concepts sont expliques 
au chapitre 3, « Communiquerou interagir ». 

ActionScript propose plusieurs methodes pour definir le comportement d'un Clip, les 
plus courantes sont les suivantes : 

playO stopO gotoAndPl ay ( ) gotoAndStop( ) nextFrameO prevFrameO 

Les methodes playO etstopO 

La methode pi ay ( ) lance la tete de lecture du clip sur laquelle elle est appliquee. La methode 
stop( ) arrete la tete de lecture. 

Ces deux methodes ne demandent aucune valeur en parametre. Cependant, puisque ce 
sont des methodes (des actions, des comportements), il est necessaire de mettre les 
parentheses ouvrante et fermante a la fin du nom de la methode. Sans les parentheses, 
Flash considere les termes pi ay ou stop comme des noms de proprietes et non comme des 
noms de methodes. 

Les instructions : 

Petit. stop( ) ; 
Grand.pl ay( ) ; 

ont pour resultat d'afficher un petit agneau fige, alors que le grand agneau est anime. 
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Extension web 

Vous trouverez cetexemple dans le fichier MethodesStopEtPlay.fi a, sous le repertoire Exemples/ 
Chapitre2. 

Les methodes gotoAndPlayO etgotoAndStopO 

Ces deux methodes demandent en parametre une valeur qui correspond au numero de 
l'image sur laquelle nous souhaitons placer la tete de lecture. 

La methode gotoAndPl ay( ) place la tete de lecture sur le numero de l'image indique en 
parametre et se deplace ensuite sur les images suivantes. La methode gotoAndStop( ) place 
simplement la tete de lecture sur l'image sans lire les images suivantes. 

Ainsi, les instructions : 

Petit. gotoAndPlayO); 

Grand. gotoAndStop( Grand. total Frames ) ; 

ont pour resultat de lancer 1' animation du petit agneau a partir de 1' image n°3 et d' afficher 
la derniere image du clip Grand, puisque Grand, total Frames represente le nombre total 
d' images du clip. 



Extension web 

Vous trouverez cet exemple dans le fichier MethodesGotoAnd.fi a, sous le repertoire Exemples/ 
Chapitre2. 

Ces deux methodes offrent la possibility de ne pas lire 1' animation de facon sequentielle, 
en sautant un certain nombre d'images. Par exemple, l'instruction Petit. gotoAndPlayO) 
lance l'animation a partir de l'image-cle n°3. Les deux premieres images ne sont pas lues 
lorsque l'animation est lancee. 



Question 

L'animation de deux clips provenant du meme symbole produit une animation synchronisee. Comment 
animer les occurrences Petit et Grand sur un mouvementnon synchrone ? 

Reponse 

Lorsque les deux clips sontanimes par defaut, ils onttous les deux le meme mouvement, puisque la tete 
de lecture de chacun des deux clips est lancee a partir de la premiere image du clip. La sequence 
d'images qui suit est identique, chacune des deux occurrences provenant du meme symbole. 
Pour desynchroniser les deux clips, il suffit done de lancer la tete de lecture sur une image differente pour 
chacun des clips. Par exemple, en ecrivant : 

Grand. gotoAndPlayO) ; 
Petit. gotoAndPlayO); 

L'animation du petit agneau demarre a partir de l'image-cle n° 6 alors que celle du grand agneau demarre 
sur l'image n° 3. L'animation des deux occurrences n'est plus synchronisee. 



Extension web 

Vous trouverez cetexemple dans le fichier QuestionReponseAnimation.fi a, sous le repertoire Exemples/ 
Chapitre2. 
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Les methodes nextFrameO et prevFrameO 

La methode nextFrameO deplace la tete de lecture d'une image vers la droite, dans le sens 
de la lecture. La methode prevFrameO deplace la tete de lecture d'une image vers la 
gauche. 

Les methodes associees aux Sprite et Shape 

En plus des methodes drawCircleO, drawRectO, beginFillO et endFilK), la propriete 
graphics des objets de type Sprite ou Shape offre la possibility de tracer des lignes en 
specifiant le type de ligne (couleur, epaisseur...) ou encore de deplacer des objets ou de 
les effacer. 

La methode NneStyleO 

La methode 1 i neStyl e( ) est utilisee pour modifier l'apparence des lignes et des contours 
des objets tels qu'un cercle ou un rectangle. Elle possede un grand nombre de parametres 
passant de la definition de la forme des extremites (arrondie, carree) au lissage du trace 
des bords de forme. Pour simplifier, examinons les trois premiers parametres qui 
s'averent les plus importants. 

• Le premier parametre est une valeur numerique comprise entre 0 et 255 qui definit 
1' epaisseur du trait. 

• Le second parametre est une valeur hexadecimale qui determine la couleur de trace de 
la ligne. 

• Le troisieme parametre est une valeur numerique comprise entre 0 et 1 qui specifie la 
transparence de la ligne. La valeur 1 correspond a une ligne opaque et 0 a une ligne 
invisible. 

ds= Pour en savoir plus 

La representation d'une couleur en valeur hexadecimale est expliquee a la section « Creerune occurrence 
d'un objet qui n'existe pas dans la bibliotheque » de ce chapitre. 

Les methodes moveToO et lineToO 

La methode moveToO est utilisee pour positionner sur la scene le curseur de dessin au 
point de coordonnees (x, y) specifie en parametre. Elle est utilisee avec la methode 
1 i neTo( ) pour tracer des droites d'un point a un autre. 

La methode 1 i neTo ( ) dessine un trait en utilisant le style de trait par defaut ou celui defini 
par 1 i neSty 1 e ( ) . La ligne est tracee a partir de la position du curseur de dessin determinee 
par la methode moveTo( ) jusqu'au point de coordonnees (x, y) specifie en parametre. 



Remarque 

Par defaut, le curseurde dessin se trouve a I'origine de la scene, c'est-a-dire en (0,0). Voir figure 1-9 etl-10 du 
chapitre introductif, « A la source d'un programme », pour visualiser le systeme de coordonnees de 
I'ecran. 

La methode clear() 

La methode clear( ) est utilisee pour effacer les traces de la propriete graphics. Elle reini- 
tialise egalement les reglages de style de trait et de remplissage. 
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Exemple 

L'exemple ci-apres utilise les methodes lineStyleO, moveToO etlineToO pour tracer un 
triangle au centre de la scene comme le montre la figure 2-23. Le trace debute a partir du 
sommet A pour aller vers le sommet B, puis le C. Le triangle est referme en tracant une 
ligne du sommet C vers le sommet A. 



Figure 2-23 

Le triangle est trace 
au centre de la scene 
avec une epaisseur 
de trait egale a 3. 




Extension web 

Vous trouverez cet exemple dans le fichier GraphicsMethodes.fi a, sous le repertoire Exemples/ 
Chapitre2. 



Le code qui trace un tel triangle s'ecrit de la facon suivante : 

//Recuperer la hauteur et la largeur de la scene 

var largeur:Number = stage. stageWidth; 

var hauteur:Number = stage. stageHeight; 

//© Creer un objet dessin 

var dessimShape = new ShapeO; 

//© Definir le style de la ligne 

// - epaisseur du trait 5, 

// - couleur rouge 

// - transparence 50 % 

dessin. graphics. lineStyle(5, OxFFOOOO, 0.5); 

//© Placer le curseur de dessin au sommet du triangle 

dessin. graphics. moveTo( largeur/2, hauteur/2 - 50); 

//© Deplacer le curseur de dessin 

// et tracer une ligne entre chaque sommet 

dessin. graphics. lineTo (largeur/2 +50, hauteur/2 + 50); 

dessin. graphics. lineTo (largeur/2 -50, hauteur/2 + 50); 

dessin. graphics. lineTo (largeur/2 , hauteur/2 - 50); 

//Afficher l'objet dessin 

addChild(dessin) ; 
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O La toute premiere instruction cree un objet qui va nous permettre d'utiliser les metho- 
des de trace et done de dessiner un triangle. Nous appelons cet objet dessi n. II est de type 
Shape, la classe poids plume du langage ActionScript 3.0. 

© Pour tracer un triangle d'epaisseur 3, de couleur rouge et a moitie transparent, nous 
appelons la methode 1 i neStyl e ( ) avec dans l'ordre, les parametres suivants : 

• 3 pour l'epaisseur ; 

• OxFFOOOO pour la couleur rouge ; 

• 0.5 pour une transparence de 50 %. 

L'appel de la methode lineStyleO s'effectue a travers la propriete graphics de 1' objet 
dessi n comme suit : 

dessin. graphics. lineStyle(5, OxFFOOOO, 0.5); 

© Le trace du triangle debute en placant le curseur de dessin au sommet A du triangle. 
Aucun trace n'est realise. II s'agit uniquement de definir la position de depart du trace. 
La methode moveTo( ) realise cette operation a l'aide de l'instruction : 

dessin. graphics. moveTod argeur / 2, hauteur II- 50); 

0 La methode 1 ineTo( ) trace une droite a partir de la position du curseur de dessin (dans 
notre cas, A) jusqu'au point dont les valeurs sont placees en parametres de la methode. 

Ainsi, le premier appel a la methode : 

dessin. graphics. 1 ineTod argeur / 2 + 50, hauteur / 2 + 50); 

positionne le curseur de dessin sur le point B et trace une droite entre A et B. 

L'instruction suivante : 

dessin. graphics. 1 ineToCI argeur / 2 - 50, hauteur / 2 + 50); 

positionne le curseur de dessin sur le point C et trace une droite entre B et C. 

La derniere instruction : 

dessin. graphics. 1 ineTod argeur / 2, hauteur 11- 50); 

positionne le curseur de dessin sur le point A et trace une droite entre C et A. 

Lafhchage du triangle sur la scene est realise en ajoutant l'objet dessin a la liste d'affi- 
chage, grace a la methode addChi 1 d( ). 

Gestion de la liste d'affichage 

Avec la nouvelle version du langage ActionScript 3.0 et le nouveau lecteur Flash, l'affi- 
chage des animations est effectue a l'aide d'un moteur de rendu qui ne traite que les 
elements appartenant a la liste d'affichage. 

Chaque animation ne contient qu'une seule liste d'affichage contenant trois types 
d'elements : la scene, des objets contenant d'autres objets a afficher (conteneurs) et de 
simples objets a afficher. 

La scene (stage) est a la racine de la liste d'affichage. Chaque animation ne contient 
qu'un seul objet stage. La scene contient ensuite les conteneurs (Sprite, MovieClip) 
d'objets a afficher et les objets a afficher (Shape, Spri te, Movi eCl i p. . .) a travers l'application 
creee au moment du controle de 1' animation. 
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Ajouter un element a la llste 

Tant qu'un objet ou un conteneur d'objet n'a pas ete ajoute a la liste d'affichage, il n'est 
pas visible sur la scene. Les conteneurs et les objets a afficher sont ajoutes a la liste d'affi- 
chage par l'intermediaire des methodes addChi 1 d( ) et addChildAtO. 

La methode addChild() 

La methode addChi 1 d ( ) prend pour seul parametre l'objet a afficher. Ce dernier est alors 
ajoute a la liste d'affichage. 

Lorsque deux elements sont ajoutes l'un apres l'autre, l'objet ajoute en dernier est trace 
au-dessus de l'objet precedemment ajoute. Contrairement aux versions precedentes du 
langage, les objets ajoutes a la liste d'affichage par l'intermediaire de la methode 
addChi ld() se superposent automatiquement sans que le programmeur n'ait a intervenir 
dans le choix du niveau de profondeur. C'est l'ordre de creation des objets dans la liste 
qui definit le niveau de superposition des objets. 

Ainsi, en supposant que nous creons deux objets A et B comme suit : 

var A :Shape = new ShapeO ; 
var B :Shape = new ShapeO ; 
addChild(A); 
addChild(B); 

l'objet B se placera sur la scene au-dessus de l'objet A. 

Pour ajouter un element dans la liste a une position specifique dans l'ordre d'empilement, 
il convient d'utiliser la methode addChi 1 dAt( ). 

La methode addChildAtO 

La methode addChi 1 dAt( ) prend en parametre deux valeurs, l'objet a afficher et la position 
de l'objet dans l'ordre d'empilement des objets a afficher. 

Ainsi, les instructions suivantes : 

var A :Shape = new ShapeO ; 
var B :Shape = new ShapeO ; 
addChild(A); 
addChildAt(B.O); 

ont pour resultat d' afficher B en dessous de A meme s'il a ete ajoute a la liste apres A. En 
effet, si Ton positionne un objet au niveau 0, l'objet est place tout en bas dans la liste 
d'affichage. II apparait en dessous de tous les autres objets presents dans la liste. Les 
autres elements sont deplaces d'un cran vers le haut. 



Remarque 

Si la valeur correspondant au niveau d'affichage est negative ou superieure au nombre d'elements 
presents dans la liste d'affichage, le lecteur Flash genere une erreur du type RangError : Error 
#2006: L'index indique sort des 1 i mi tes. L'element n'est pas ajoute a la liste d'affichage. 
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Creer un conteneur 

II est souvent interessant de creer un ensemble d'objets a l'interieur d'un objet appele 
« conteneur ». Grace au conteneur, il devient plus facile de : 

• deplacer un ensemble d'objets en ne deplacant que le conteneur ; 

• verifier le nombre d' elements appartenant au conteneur, en evitant de compter des 
elements appartenant a la liste d'affichage principale. 

On dit que A est conteneur de B lorsque Ton ecrit 1' instruction : 
A.addChild(B); 

Le conteneur A est un objet de type Sprite ou MovieCl ip. L' objet B place a l'interieur de A 
est de type Sprite, MovieCl ip, Shape ou encore Text Field (pour afficher du texte). Plusieurs 
objets de types differents peuvent etre places a l'interieur d'un conteneur. 

Remarque 

Pour que B soit affiche sur la scene, le conteneur A doit I'etre egalement. N'oubliez pas d'ajouter I'instruction 
addChi 1 d ( A) ; avantou apres avoir ajoute des elements au conteneur. 

Un carre rouge avec legende 



Extension web 

Vous trouverez cetexemple dans le fichierConteneur.fi a, sous le repertoire Exemples/Chapitre2. 



L'exemple suivant affiche un carre rouge ainsi qu'un texte en legende, comme le montre 
la figure 2-24 




Pour realiser cet affichage, vous devez ecrire les instructions suivantes : 

//Recuperer la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 
var cote:uint = 100; 
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//© Creer un conteneur 

var boite:Sprite = new SpriteO; 

//© Creer un carre rouge de 100 pixels de cote, centre 
var carre:Sprite = new SpriteO; 
carre.graphics.beginFi 1 1 (OxFFOOOO) ; 

carre. graphics. drawRect((largeur - cote)/2, (hauteur-cote)/2, cote, cote); 

carre.graphics.endFil 1 ( ) ; 

//Ajouter une ombre au carre 

carre. filters = [new DropShadowFilter(2)] ; 

//© Placer le carre dans la boite 
boite. addChi ld(carre) ; 

//© Creer une zone de texte 

var legende:TextField = new TextFieldO; 

//Definir la police et la taille du texte 

var format:TextFormat = new TextFormat( "Arial " , 18); 

//Modifier le format de texte par defaut 

legende.defaultTextFormat = format; 

//Positionner le champ de texte en dessous du carre 
legende.x =(largeur - cote)/2 ; 
legende.y= (hauteur+cote)/2; 
//Afficher un texte 
legende.text = "carre rouge "; 

//© Placer la zone de texte dans la boite 
boi te . addChi 1 d ( 1 egende ) ; 

//© Afficher la boite 
addChild(boite); 



© Le conteneur boite est cree a l'aide de l'operateur new. II est de type Sprite. Le type 
Shape ne peut etre utilise pour definir un conteneur. 

© Le carre est defini a partir des methodes beginFillO, drawRectO et endFillO. Notez 
l'instruction carre. filters = [new DropShadowFilter(2)] qui ajoute automatiquement au 
carre une ombre d'une epaisseur de 2 pixels. 

© Le carre est place dans le conteneur boite, a l'aide de l'instruction boi te . addChi 1 d( carre). 

© L'affichage d'un texte s'effectue par l'intermediaire du type TextField. Ici, la police et 
la taille des caracteres utilises sont Arial corps 18. Le contenu du texte est modifie par 
l'intermediaire de la propriete text. 

© Le texte est place dans le conteneur boi te, a 1' aide de l'instruction boite.addChild(legende). 

A cette etape, les objets 1 egende et carre sont contenus dans boite. Aucun element n'est 
affiche tant que le conteneur boite n'est pas ajoute a la liste d'affichage principale ('). 
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Question 

Que se passe-t-il si Ton remplace I'instruction : 
boite.addChild(legende) ; 

par 

carre. addChild(legende) ; 

Reponse 

L'objet carre devient a son tour conteneur. L'objet legende appartient a la liste d'affichage du carre. 
L'ombre port.ee est appliquee au carre et a tous les objets que ce dernier est susceptible de contenir. 
Le texte apparait done avec une ombre. 



Supprimer un element 

Pour effacer un objet de la scene, il convient de le supprimer de la liste d'affichage. 
La suppression d'un conteneur ou d'un objet passe par les methodes removeChildO et 
removeChi 1 dAt ( ). 

Les methodes removeChildO et removeChildAt() 

La methode removeChildO prend pour seul parametre l'objet a effacer. Ce dernier est 
alors supprime de la liste d'affichage et n' apparait plus sur la scene. 

L' instruction : 

removeChild(A); 

supprime l'objet A de la liste d'affichage qui est alors efface de la scene. S'il existe des 
objets se situant a un niveau superieur a celui de A, ceux-ci voient leur niveau descendre 
automatiquement d'un cran dans la liste d'affichage. 

Pour effacer un element se situant a un niveau specifique et dont vous n'avez pas force - 
ment garde la reference, vous pouvez utiliser la methode removeChi 1 dAt( ) qui demande 
pour seul parametre la valeur correspondant au niveau que vous souhaitez effacer. 

L' instruction : 

removeChi 1 dAt (0) ; 

supprime l'objet se situant au niveau 0 dans la liste d'affichage. Dans notre exemple, il 
s'agit du niveau correspondant a l'objet B. Ce dernier est done efface de la scene. 



Remarque 

La propriete numChildren permetde connaitre la taille de la liste d'affichage, e'est-a-dire le nombre de 
niveaux occupes par un objet. 

La methode removeChi 1 dAt( ) n'accepte que des valeurs comprises ente 0 et numChildren - 1. 



Notez que si vous souhaitez supprimer un element B contenu dans un objet A, vous devez 
utiliser une instruction du type : 

A. removeChild(B) ; 



Les symboles 




Chapitre 2 



Memento 



Un symbole est un dessin enregistre dans la bibliotheque du fichier source. Un objet est 
une copie du symbole, placee sur la scene ou creee par programme. Cette copie est aussi 
appelee une « instance » ou encore « occurrence ». 

Pour creer un symbole, vous pouvez utiliser : 

• La touche F8 pour transformer un dessin place sur la scene. 

• Les touches Ctrl + F8 (PC) ou Cmd + F8 (Mac) pour creer un symbole vide. 
Une occurrence de symbole peut etre creee soit : 

• manuellement, en faisant glisser le symbole depuis le panneau Bibliotheque sur la 



• par programme, en utilisant l'operateur new dans une instruction de declaration 
d' objet. 

L instruction : 



cree une occurrence nominee peloteDeLaine. Le type AgneauClp correspond a un symbole 
AgneauCl p enregistre dans la bibliotheque. Le symbole doit etre exporte vers ActionScript 
a l'aide d'un nom de liaison. 

Les instructions : 



creent des occurrences de symbole vide, nominees cercle et carre. II est possible de 
dessiner par programme a l'interieur de ces classes poids plume. 

Tout symbole possede des proprietes et des methodes. 

Les proprietes x et y permettent de placer une occurrence a l'ecran, la propriete alpha 
definit son niveau de transparence. Les instructions : 

peloteDeLaine. x = 100; 
peloteDeLaine. y = 200; 
peloteDeLaine. alpha = 0.8; 

placent l'occurrence peloteDeLaine a 100 pixels du bord gauche de la fenetre et a 
200 pixels du bord superieur. L'occurrence est a 80 % visible. 

Les methodes stop( ) et gotoAndPl ay( ) sont utilisees pour stopper l'animation d'un clip ou 
pour lancer l'animation a partir d'une image specifique. Les instructions : 

peloteDeLaine. stop( ) ; 



la premiere stoppe l'animation de l'occurrence peloteDeLaine et la seconde lance a 
nouveau l'animation de l'occurrence peloteDeLaine a partir de l'image-cle n° 6. 

Les objets ne sont affiches sur la scene que lorsqu'ils sont ajoutes a la liste d'affichage 
grace a la methode addChi 1 d( ). 



scene ; 



var peloteDeLaine:AgneauClp = new AgneauClpO; 



var carre:Shape = new ShapeO; 
var cercle:Sprite = new SpriteO; 



peloteDeLaine.gotoAndPl ay (6) ; 
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Exercices 

Les clips d'animation 
Exercice 2.1 

Creer le clip OiseauClp 

Creez un clip d'animation OiseauClp en utilisant les images-cles enregistrees dans le 
fichier Oiseau.fla figurant dans le repertoire Exercices /Support Pour Real iser Les Exercices/ 
Chapitre2 (cf. extension web). 

Creer et nommer une occurrence manuellement 

• Placez une instance du symbole Oi seauCl p, vers le haut de la scene et la nommer pi af . 

• A l'aide du panneau Proprietes, modifiez la couleur de l'occurrence pi af . 

Creer une occurrence par programme 

En utilisant l'occurrence pi af comme clip d'amorcage, creez une instance du symbole 
OiseauClp en utilisant l'operateur new et nommez-la moineau. 

Les proprietes d'un clip d'animation 

• A l'aide de la commande trace( ), affichez la position de l'occurrence piaf. 

• Placez l'occurrence moineau au centre de l'ecran (pour connaitre la taille de votre 
scene, reportez-vous au chapitre introductif, « A la source d'un programme », section 
« Definir les constantes »). 

• Faites en sorte que l'occurrence piaf soit un tiers plus petite que l'occurrence moi neau. 
Les methodes d'un clip d'animation 

• Stoppez l'animation de l'occurrence pi af a la derniere image du clip. 

• Stoppez l'animation de l'occurrence moineau au milieu du clip. 

Les boutons 

L'objectif est de creer un bouton Stop dont les 4 images-cles ont la forme suivante : 
Figure 2-25 

Haut Dessus Abaisse Cliquable 



Les differents etats 
du bouton Stop 



Les formes du bord et du fond de chaque bouton sont identiques selon l'etat dans lequel 
le bouton se trouve. Seules la couleur et la position du bouton changent. 

Extension web 

Vous trouverez la forme Haut du bouton dans le fichier BoutonStop.fla figurant dans le repertoire 
Exercices /Support Pour Real iser Les Exerci ces/Chapi tre2. 



Les symboles 




Chapitre 2 



Exercice 2.2 

Les symboles graphiques 

• Pour optimiser notre bouton en poids ou pour la mise a jour, enregistrez les bords et le 
fond sous deux symboles de type graphique distincts. 

• Nommez le bord du bouton BordStopGrq et le fond FondStopGrq. 
Le bouton Stop 

• Creez un symbole vide de type Bouton et nommez-le StopBtn. 

• Sur chaque image -cle du bouton, placez deux instances des symboles graphiques 
BordStopGrq et FondStopGrq. 

• Modifiez la couleur des instances des symboles graphiques BordStopGrq et FondStopGrq 
pour chacun des etats. 

• Faites en sorte que seule la partie interieure du bouton soit cliquable. 
Creerune occurrence par programme 

• Creez une instance du symbole StopBtn a l'aide de l'operateur new et nommez-la arret. 

• Placez 1' occurrence arret a 50 pixels au-dessus du bord inferieur et a 100 pixels du 
bord droit de la scene. 

• Lancez la lecture de 1' animation en tapant sur les touches Ctrl + Entree (PC) ou 
Cmd + Entree (Mac) pour verifier le bon fonctionnement et la bonne position de 
1' occurrence arret. 

Exercice 2.3 

L'objectif est de tracer un rectangle jaune semi-transparent aux bords rouges a l'interieur 
duquel se trouve une croix bleue comme le montre la figure 2-26. 



Le rectangle est un objet de type Sprite et la croix de type Shape. 
Le rectangle 

• Creez un objet de type Spri te, et nommez-le 1 eRectangl e. 

• A l'aide de la methode begi nFi IK), definissez la couleur de fond du rectangle (jaune 
semi-transparent) . 

• A l'aide de la methode lineStyleO, definissez le style du trace du bord du rectangle 
(rouge, epaisseur 2). 



Figure 2-26 




Un rectangle jaune 
aux bords rouges 
avec une croix bleue 
placee en dessous. 



94 



Apprendre a programmer en ActionScript 3 



• A l'aide de la methode drawRect( ), definissez la taille et la position du rectangle dans 
le quart superieur gauche de la scene, la hauteur du rectangle est de 50, sa largeur vaut 100. 

• Affichez 1 eRectangl e sur la scene. 
Remarque 

Vous pouvez definir quatre variables (par exemple, 1 argeur, hauteur, largeurftect et hauteurRect) 
de type Number afin d'y stacker la taille de la scene ainsi que ce lie du rectangle. 

La croix 

• Creez un objet de type Shape et nommez-le 1 aCroix . 

• A l'aide de la methode 1 ineStyleO, definissez le style du trace du bord du rectangle 
(bleu, epaisseur 1). 

• A l'aide des methodes moveToO et lineToO, definissez les deux diagonales du 
rectangle (les variables largeur, hauteur, largeurRect et hauteurRect sont utiles pour 
realiser cette definition). 

Affichez 1 aCroix sur la scene sous 1 eRectangl e. Pour vous aider, vous pouvez afficher le 
nombre d' elements presents dans la liste d'affichage. 

Remarque 

Les elements graphiques places manuellement sur la scene (fond, rectangles grises... ) sont affiches sur 
la scene, lis constituent done des elements de la liste d'affichage. 



Le projet mini site 

Extension web 

Vous trouverez les corriges du projetdans le repertoire Projet/Chapitre2. 



Mise en page du mini site 

Les specifications fonctionnelles decrites lors du chapitre precedent nous permettent de 
mettre en place, sur la scene, les differents elements necessaires pour realiser le mini site. 

Ces elements sont au nombre de quatre : il s'agit du titre, des rubriques afhehees sous 
forme de zones rectangulaires colorees, des mini rubriques et des pages, comme le 
montre la figure 2-27. 

Figure 2-27 

Mise en page 
du mini site 



mini rubriques 



Les symboles 
Chapitre 2 | 

Lidee, pour realiser ces differents elements, est de : 

• Creer un espace de travail de 600 pixels en hauteur et de 1 000 pixels en largeur, de 
couleur noire. 

• Creer par programme autant de zones colorees qu'il y a d' elements a afficher. 

• Placer sur la scene, chacune de ces instances en modifiant leurs proprietes x et y. 

• Creer un symbole pour le titre et le placer par programme. 

Chaque element est de taille fixe et doit etre utilise a tout moment dans le programme. II 
convient done de definir des variables pour y stocker les valeurs les plus couramment 
utilisees. Ainsi, nous choisissons de nommer la largeur et la hauteur de la scene 
largeurScene et hauteurScene, respectivement. Ces variables sont initialisers des le debut 
du programme a la taille de la scene en utilisant les outils stage. stageWidth et 
stage. stageHeight. 

Les couleurs sont egalement definies en debut de programme. Leur initialisation est 
effectuee lors de la declaration des quatre variables, comme suit : 

var couleurBleu:uint = 0x016087; 

var couleurViolet:uint = 0x660066; 

var couleurRouge:uint = 0xCC0033; 

var couleurOrangeiuint = 0xFF9900; 

Les rubriques 

La largeur d'une rubrique est stockee dans la variable 1 argeurRubrique et sa hauteur 
hauteurRubri que. Les rubriques sont au nombre de quatre. Elles recouvrent l'integralite de 
la scene. La largeur d'une rubrique vaut done le quart de la largeur de la scene. La 
hauteur d'une rubrique vaut la hauteur de la scene moins 150 pixels. 

Les zones rectangulaires colorees sont dessinees a 1' aide des methodes graphics.beginFill (), 
graphics.drawRect( ) et graphics .endFi 1 1 ( ). Chaque zone est enregistree dans un objet de 
type Sprite, nomme respectivement rubriquePhotos, rubriqueAnimes, rubriqueVideos et 
rubriquelnfos. 

Le placement des rubriques sur la scene s'effectue en remarquant que : 

• la premiere rubrique est positionnee en (0*1 argeurRubrique, 150) ; 

• la seconde en (1*1 argeurRubrique, 150) ; 

• la troisieme en (2*1 argeurRubrique, 150) ; 

• la quatrieme en (3*1 argeurRubrique, 150). 

Les mini rubriques 

La largeur d'une mini rubrique est stockee dans la variable largeurMini et sa hauteur 
hauteurMi ni . La largeur d'une mini rubrique est de 20 pixels, sa hauteur de 35. Les mini 
rubriques sont au nombre de quatre et sont egalement dessinees a l'aide des methodes 
graphics .beginFill ( ), graphics. drawRectO et graphics. endFi 1 1 ( ). Elles sont enregistrees 
dans des objets de type Sprite, nommes respectivement mini Photos, miniAnimes, mini Videos 
et mini Infos. 
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Le placement des mini rubriques s'effectue en remarquant que : 

• la premiere mini rubrique est positionnee en (0*1 argeurMini + largeurScene - ecartBord, 
ecartBord) ; 

• la seconde en (1*1 argeurMini + largeurScene - ecartBord, ecartBord) ; 

• la troisieme en (2*1 argeurMini + largeurScene - ecartBord, ecartBord) ; 

• la quatrieme en (3*1 argeurMini + largeurScene - ecartBord, ecartBord). 

Les pages 

La largeur d'une page est stockee dans la variable 1 argeurPage et sa hauteur hauteurPage. 
La largeur d'une page correspond a la largeur de la scene, sa hauteur a celle d'une rubri- 
que. Les pages sont au nombre de quatre. Elles sont dessinees a l'aide des methodes 
graphics, begin Fill ( ), graph ics.drawRectC ) et graphics .end Fi 1 1 ( ). Elles sont enregistrees 
dans des objets de type Sprite, nommes respectivement pagePhotos, pageAnimes, pageVideos 
et pagelnfos. 

Les pages sont toutes placees en (0,150). 
Remarque 

Attention de ne pas ajouter les pages a la fin de la liste d'affichage, sous peine de voir les rubriques dispa- 
rage dessous. 

Le titre 

Le titre du site est un symbole de type Clip nomme titreClp, a l'interieur duquel est 
placee une zone de texte statique contenant le nom du site. Les caracteristiques du texte 
sont les suivantes : 

• Police : AristaFont (voir police enregistree dans la bibliotheque de projet). 

• Taille de la police : 100 

• Couleur : noir 

• Filtre : Ombre portee avec un flou de 5 pixels, de couleur blanche, d'intensite 164 % et 
de qualite elevee. 

Lors de la creation du symbole, prenez soin de placer le point d'origine (point d'ancrage) 
sur le coin inferieur gauche du texte, afin de faciliter son positionnement ulterieur sur la 
scene. Vous pouvez vous aider du panneau Aligner obtenu en tapant sur Ctrl + K pour les 
PC et Cmd + K pour les Mac. 

L'occurrence du titre est ensuite creee par programme. Ne pas oublier d'exporter le 
symbole pour ActionScript, comme indique au cours de la section « Creer une occur- 
rence par programme » de ce chapitre. 

Pour afhcher le titre, il convient ensuite de : 

• Creer une instance ti tre a partir du symbole Ti treCl p, a l'aide de l'operateur new. 

• Positionner l'occurrence en (20, 150). 

• Placer l'occurrence dans la liste d'affichage a l'aide de la methode addChi 1 d( ). 



3 

Communiquer ou interagir 



Les animations realisees au cours des chapitres precedents sont executees en boucle, de 
la premiere a la derniere image. La tete de lecture se deplace d'une image a l'autre, et 
l'utilisateur n'a aucun moyen d'en modifier le cours, ni de transmettre une quelconque 
information. 

Or, tout l'interet d'un programme est de produire un resultat en fonction des informations 
transmises par l'utilisateur. L' application a besoin de donnees precises qui lui sont 
communiquees par l'intermediaire de formulaires, de deplacements de souris ou encore 
de clics. En contrepartie, 1' application reagit en affichant les informations saisies par 
l'utilisateur, en modifiant la couleur ou la forme de la zone cliquee. On dit alors qu'il y a 
interaction ou encore que 1' application est interactive. 

Pour realiser de telles applications, nous sommes amenes a definir le comportement des 
objets en fonction des actions de l'utilisateur sur ces derniers. Ces actions sont traitees en 
utilisant la notion d'evenement. 

Dans ce chapitre, nous aborderons les differentes techniques de communication entre une 
application et l'utilisateur. Au cours de la section « Les differents modes de communica- 
tion », nous etudierons comment saisir une valeur au clavier, puis comment afficher le 
resultat d'un calcul en cours d'execution. Nous examinerons ensuite, dans la section « La 
gestion des evenements », comment associer une action a un evenement. Pour cela, nous 
definirons les notions d'evenement et de gestionnaire d'evenement. 

Pour finir, dans la section « Les techniques de programmation incontournables », nous 
realiserons les bases d'un jeu Flash interactif, afin d'etudier les techniques fondamenta- 
les de programmation telles que 1' incrementation ou encore la modification de la couleur 
d'un objet en cours d' animation. 

Les differents modes de communication 

Comme nous l'avons observe au cours du chapitre introductif, une application communi- 
que avec l'utilisateur en affichant ou en receptionnant des valeurs textuelles ou nume- 
riques. Ces valeurs sont par exemple transmises par l'intermediaire du clavier pour etre 
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ensuite traitees et modifiees directement par 1' application. De telles informations sont 
appelees « informations dynamiques » puisqu'elles sont transformees en cours d'execution 
du programme. 



Remarque 

Les informations dynamiques sont affichees non pas dans la fenetre de sortie (comme nous avons pu le 
realiser au cours du chapitre 1, « Traiter les donnees », section « Afficher la valeurd'une variable »), mais 
directementdans I'animation Flash. 



Observons sur un exemple simple comment realiser chacune de ces techniques. 

Une calculatrice pour faire des additions 

Pour examiner le fonctionnement des entrees/sorties, construisons une application qui va 
nous permettre d'additionner deux valeurs. Celles-ci sont saisies au clavier par l'utilisateur. 
Le resultat de 1' addition est ensuite affiche apres validation des valeurs saisies. 

L' application se presente sous la forme suivante : 




Figure 3-1 

L' application addition. swf est constitute de 5 objets permettant la saisie de 2 valeurs f© et ®) 
et Vaffichage du resultat (©). 



Extension web 

Vous trouverez cet exemple dans le fichierAddition.fi a, sous le repertoire Exemples/Chapitre3. 

La mise en place de l'application addition. fla s'effectue en plusieurs etapes : 

• la definition des objets necessaires a l'application ; 

• le positionnement des objets a l'ecran ; 

• la description des comportements de chaque objet, en fonction des actions de l'utilisateur. 

Ann de faire comprendre au lecteur la demarche a suivre pour construire une telle appli- 
cation, chacune des etapes va donner lieu a une description detaillee et sera suivie de sa 
traduction commentee en ActionScript 3.0. 

Definition des objets 

L'application addi ti on . f 1 a est composee de 5 objets, places a l'ecran selon un ordre 
precis (voir figure 3-1). 

• Les objets © et © permettent la saisie des deux valeurs a additionner. 
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Chapitre 3 



• L'objet © indique a l'utilisateur que l'operation realisee est une simple addition. 

• L'objet © est, quant a lui, un peu plus complexe, puisqu'il va permettre de valider la 
saisie des valeurs afin d'afficher le calcul resultant. 

• L'objet © est utilise pour afficher le resultat de l'addition. 

Ces objets sont constants chacun a partir d'un symbole dont les caracteristiques assurent 
la realisation des fonctions attendues. Nous les decrivons ci-apres. 



Le symbole SaisirClp 

Le symbole Sai si rCl p est un symbole de type CI i p. II est constitue d'une zone de texte et 
d'un rectangle permettant de colorer le fond de la zone de saisie. La zone de texte est 
placee sur un caique nomme Texte, le rectangle sur un second caique nomme Fond. 
Le caique Texte est place au-dessus du caique Fond. 



Figure 3-2 

Le symbole SaisirClp 
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Pour que l'utilisateur puisse saisir une valeur, nous devons transformer la zone de texte 
en type Texte de saisie. Pour ce faire, avant de tracer la zone de texte, allez dans le 
panneau Proprietes de l'outil Texte et choisissez l'item Texte de saisie, dans la liste (voir 
figure 3-2). 

Ensuite, afin de recuperer la valeur saisie, il convient de nommer la zone de texte, dans le 
champ Nom de l'occurrence situe juste en dessous du type de la zone de texte (voir 
figure 3-2). 



Remarque 

Par souci de clarte, nous choisissons de prendre la convention de nommer les zones de texte de saisie 
1 abel In quelle que soit la fina lite du symbole dans lequel se situe la zone de texte. 
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L'objet AfficherClp 

Le symbole AfficherClp est un symbole de type CI ip. II est constitute d'une zone de texte 
et d'un rectangle permettant de colorer le fond de la zone d'affichage. La zone de texte 
est placee sur un caique nomme Texte, le rectangle sur un second caique nomme Fond. 
Le caique Texte est place au-dessus du caique Fond. 



Figure 3-3 

Le symbole 
AfficherClp 
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Pour que 1' application puisse afficher un message dans la zone de texte, nous devons la 
transformer en type Texte dynamique. Pour ce faire, avant de tracer la zone de texte, allez 
dans le panneau Proprietes de l'outil Texte et choisissez l'item Texte dynamique, dans la 
liste (voir figure 3-3). 

Ann de transmettre la valeur a afficher, il convient de nommer la zone de texte dans le 
champ Nom de l'occurrence, situe juste en dessous du type de la zone de texte (voir 
figure 3-3). 



Remarque 

Par souci de clarte, nous choisissons de prendre la convention de nommer les zones de texte dynamique 
label Out quelle que soit la fina lite du symbole dans lequel se situe la zone de texte. 

Les symboles OperateurClp etValiderClp 

Les symboles OperateurClp et ValiderClp sont de type Clip. lis sont constitues chacun 
d'un caique Fond et d'un caique Texte sur lequel est trace le signe + pour le symbole 
OperateurCl p, et le signe = pour le symbole ValiderClp. 

Ces deux symboles ne contiennent pas de zone de texte dynamique ni de saisie, 
puisqu'ils restent identiques tout au long de 1' application. 

Creation des objets 

Les objets sont crees a l'aide de l'operateur new. 
ds= Pour en savoir plus 

La creation d'un objet par programme est decrite au chapitre 2, « Les symboles », section « Les differentes 
fagons de creer des occurrences ». 
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Figure 3-4 

Le symbole OperateurClp 




Figure 3-5 

Le symbole ValiderClp 




Les objets O et © permettant la saisie des deux valeurs a additionner sont crees par les 
instructions : 

var valeur_l:SaisirClp = new SaisirClpO; 
var valeur_2:SaisirClp = new SaisirClpO; 



Remarque 

Les deux objets valeur_l et valeur„2 sont crees a partir du meme symbole Saisi rClp. Seule la diffe- 
rence concernant le nom des occurrences permet de dlstinguer le premier objet du second. 



L'objet ©, indiquant a l'utilisateur que l'operation realisee est une simple addition, est 
cree par l'instruction suivante : 

var signeiOperateurClp = new OperateurClp( ) ; 

Ce nouvel objet a pour nom si gne. 

L'objet © permettant la validation de la saisie des valeurs est cree par l'instruction ci- 
dessous ; il a pour nom egal . 

var egal : Va 1 iderClp = new ValiderClpO; 

Pour finir, l'objet © utilise pour afficher le resultat est defini grace a l'instruction ci- 
apres ; il a pour nom resul tat. 



var resultat:AfficherClp = new AfficherClp( ) ; 
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Les objets sont ensuite affiches sur la scene en les ajoutant a la liste d'affichage comme 
suit : 

addChild(valeur_l); 
addChild(valeur_2); 
addChild(signe) ; 
addChildCegal ); 
addChild(resultat); 



Remarque 

Si un symbole ne s'affiche pas a I'ecran apres sa creation par new, verifiez que la liaison « Exportez pour 
ActionScript » a bien ete effectuee (voir la section «Creer une occurrence par programme* du 
chapitre 2). 



Positionnement des objets a I'ecran 

Les objets sont places de facon a les rendre independants de la taille de la scene et des 
objets eux-memes. Pour cela, nous devons placer ces derniers en utilisant des valeurs 
calculees a partir de la taille de la scene (hauteur et largeur) et de la taille des objets affi- 
ches. Aucune valeur determinee de facon fixe ne doit etre codee directement dans le 
programme. 

Ainsi, nous supposons que les elements de la calculatrice sont places a mi-hauteur de la 
fenetre, et qu'un ecart de 5 % de la largeur de la fenetre separe le premier objet du bord 
gauche de la fenetre (voir figure 3-6). Chaque objet est ensuite espace de ce meme ecart. 




Figure 3-6 - Les objets sont places sur la scene compte tenu de leur largeur et d'un ecart donne. 



La hauteur de la scene, ainsi que sa largeur sont calculees a partir de l'objet Stage de la 
facon suivante : 

var largeur :uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 

Position sur I'axe des Y 

Pour placer un objet a mi-hauteur de la fenetre, il suffit alors de le positionner a la moitie 
de la hauteur de la fenetre, comme ceci : 

objet. x = hauteur / 2; 

Pour placer un objet sur la scene, Flash utilise le point de reference defini lors de la crea- 
tion du symbole dont est issu l'objet. Selon la position du point de reference (en haut, a 
gauche, au centre. . .), l'objet affiche n'est pas forcement place a la mi-hauteur de la scene. 
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Ainsi, pour notre exemple, nous avons choisi de prendre comme point de reference le 
coin superieur gauche du symbole. Pour placer les objets a mi-hauteur, nous devons done 
retirer la moitie de la hauteur de l'objet (voir figure 3-6). 



Remarque 

Pour etre surs que les objets se positionnent de fagon harmonieuse, nous avons pris soin de tous les 
dessinerde la meme hauteur. 



Le code permettant de placer le premier objet a mi-hauteur quelles que soient les 
hauteurs de l'objet et de la scene s'ecrit : 

valeur_l.y = (hauteur - valeur_l. height) II; 

Ensuite, comme tous les autres objets se situent a la meme hauteur que l'objet valeur_l, 
nous pouvons initialiser leur position sur l'axe des Y a val eur_l .y, comme suit : 

signe.y = valeur_l.y; 
valeur_2.y = valeur_l.y; 
egal .y = val eur_l .y ; 
resultat.y = valeur_l.y; 



Question 

Quelles sontles instructions qui permettent de placer similairement, les objets resultat, valeur_l, 
valeur_2, egal et signe sur la scene, si Ton suppose que le point de reference des symboles 
AfficherClp, Saisi rClp, Val iderClp et OperateurCl p est centre sur le bord gauche du clip ? 

Reponse 

Lorsque le point de reference est centre sur le bord gauche du clip, il n'est plus besoin de retrancher la 
moitie de la hauteur du clip pour le placer au centre de la scene. L'instruction : 

valeur_l.y = hauteur 12; 

suffita placer l'objet val eurjl a mi-hauteurde la scene. Les autres objets se placent ensuite de la meme 
facon par rapport a ce dernier (voir extension web, fichier QuestionReponsePosition.fi a sous le 
repertoire Exemples/Chapitre3). 

Position sur l'axe des X 

Un ecart de 5 % de la largeur de la fenetre separe le premier objet du bord gauche de la 
fenetre. Cet ecart est calcule par l'instruction : 

var ecart:Number = 5 * largeur / 100; 

L'objet O (val eur„l) est ensuite place sur l'axe des X, par l'instruction : 

valeur_l.x = ecart; 

L'objet suivant (© - signe) est place juste apres la premiere valeur a saisir avec egale- 
ment un ecart de 5 % de la largeur de la fenetre. Le calcul de sa position exacte s'effectue 
grace a l'instruction (voir figure 3-6) : 



| signe. x = valeur_l.x + valeurl. width + ecart; 
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Remarque 

En utilisant la position et la largeurde I'objet precedent, nous rendons le positionnementdes objets inde- 
pendantde leur forme. Si vous modifiez la taille et la forme d'un ou plusieurs symboles, I'affichage reste 
coherent, les objets ne peuventpas se chevaucher. 



Les trois autres objets composant la calculatrice sont positionnes de la meme facon, dans 
leur ordre d' apparition, en tenant compte de la position de I'objet precedent, de sa largeur 
et de l'ecart impose entre chaque objet. 

valeur_2.x = signe.x + signe. width + ecart; 
egal.x = valeur_2.x + valeur_2. width + ecart; 
resultat. x = egal.x + egal .width + ecart; 

Saisir une information au clavier 

Une fois tous les objets positionnes, examinons comment les valeurs saisies au clavier 
sont transmises au programme pour etre additionnees. 

Les valeurs sont saisies par 1' intermediate des objets valeur_l et valeur_2 via le clavier, 
apres que l'utilisateur ait clique sur chacun de ces objets. Les valeurs ainsi saisies sont 
enregistrees dans des variables (ici a et b), en utilisant le champ de texte 1 abel In, cree lors 
de la mise en place du symbole Sai si rCl p, comme suit : 

//Declaration des variables pour memoriser les valeurs saisies 
var a, b:Number; 

//La premiere valeur est saisie dans la zone de texte 
//l abel In de I'objet valeur_l 
a = valeur_l. label In. text; 
trace( "a : " + a) ; 

//La seconde valeur est saisie dans la zone de texte 
//l abel In de I'objet valeur_2 
b = valeur_2. label In. text; 
trace( "b : " + b) ; 



Remarque 

Observez qu'il estobligatoire, pour acceder aux valeurs saisies, de placer le terme .text derriere le nom 
de la zone de saisie. 



Les commandes traceO ne sont pas obligatoires. Leur presence permet de verifier que 
les valeurs saisies sont effectivement bien enregistrees dans les variables a et b. 

Afficher une information 

Lorsque les deux valeurs sont saisies, le resultat de 1' addition est stocke dans une troi- 
sieme variable nommee c. Cette variable est ensuite utilisee pour afficher son contenu, 
via I'objet resultat, comme le montrent les instructions ci-apres. 

//Declaration de la variable memorisant le resultat de 1 'addition 

var ciNumber; 

//Calcul de 1 'addition 

c = a + b; 

trace ( "c : "+ c) ; 
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//Le resultat est affiche par 1 ' intermedial re de la zone de 
//texte dynamique nominee labelOut. 
resultat. labelOut. text = c; 



Remarque 

Observez qu'il est obligatoire, pour accederaux valeurs saisies, de placer le terme .text derriere le nom 
de la zone de saisle. 



De la meme facon, la commande traceO n'est pas obligatoire. Elle permet simplement 
verifier que l'addition a bien ete effectuee. 

Execution de I'application 

Le programme tel que nous l'avons realise s'execute correctement, il n'y a pas d'erreur 
de syntaxe. Cependant, il ne realise pas la fonction attendue, a savoir afficher le resultat 
de l'addition. En effet, les valeurs saisies par l'utilisateur ne sont pas transmises au 
programme. Elles ne sont pas enregistrees dans les variables a et b. Les commandes 
trace( ) affichent des valeurs vides (voir figure 3-7). 

Figure 3-7 

Les valeurs saisies au 
clavier ne sont pas enre- 
gistrees dans les variables 
a et b. 




Que se passe-t-il ? 

Pour que les valeurs soient transmises a I'application, l'utilisateur doit valider leurs 
saisies soit en tapant sur la touche Entree du clavier, soit en cliquant sur le bouton egal. 

Or, ces deux actions ne sont pas directement comprehensibles par le lecteur Flash. Le fait 
de taper sur une touche du clavier ou de cliquer sur un objet doit etre traduit en langage 
informatique. Cette traduction passe par la mise en place d'un systeme d'ecoute du 
clavier ou de la souris, systeme qui se met en ceuvre grace aux gestionnaires d'eve- 
nements. 

cs" Pour en savoir plus 

La suite de cetexemple est traitee a la fin de la section « La gestion des evenements ». 



La gestion des evenements 

ActionScript 3.0 est un langage de programmation evenementielle. II a ete concu de 
facon a faciliter la description des comportements de 1' animation en fonction des actions 
realisees par l'utilisateur. Ainsi, chaque action ou non-action provoque un comportement 
specifique. Ces comportements sont decrits par 1' intermediate d'un gestionnaire 
d'evenement. 
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Qu'est ce qu'un evenement ? 

La notion a" evenement est tres simple a comprendre. Dans la vie reelle, nous agissons 
tres souvent en fonction d'evenements. Reprenons l'exemple de la recette de l'oeuf a la 
coque decrite au chapitre introductif de cet ouvrage. D'un point de vue programmation 
evenementielle, nous pouvons decrire les comportements suivants : 

• Lorsque l'eau bout (evenement), placer l'oeuf dans la casserole (action), 
ou encore : 

• Lorsque le minute ur sonne (evenement), eteindre la plaque electrique, prendre une 
cuillere, retirer l'oeuf de la casserole a l'aide de la cuillere et poser l'oeuf dans le 
coquetier (serie d'actions). 

Les evenements sont associes au temps (attendre que l'eau soit en ebullition) ou a un 
changement d'etat d'un objet (le minuteur sonne). Ensuite, a chaque evenement sont 
associees une ou plusieurs actions (placer l'oeuf, retirer l'oeuf. . .). 

Les types d'evenements sous Flash sont, bien entendu, tres differents de ceux de la vie 
reelle. lis sont en general associes a un mouvement, a un clic de souris ou encore a la 
pression d'une touche du clavier. Le fait qu'aucune action ne soit realisee dans un laps de 
temps donne peut egalement constituer un evenement. Les evenements sont done lies soit 
au temps qui passe, soit a une action de l'utilisateur sur un peripherique (clavier, 
souris...). 



Les differents types d'evenements 

ActionScript 3.0 propose un tres grand nombre d'evenements a gerer. Certains se produisent 
pendant la lecture de l'animation, lorsque la tete de lecture se deplace d'image en image, 
d'autres repondent a une action de l'utilisateur. 

Comme nous avons pu le constater avec la calculatrice, une animation ne gere pas 
d'evenement, par defaut. Elle s'execute de facon continue, sans qu'aucun evenement ne 
soit traite. C'est au programmeur de determiner quel type d'evenement 1' application doit 
recevoir. 

Plus precisement, ce n'est pas 1' application en tant que telle qui gere les evenements, 
mais les objets definis au sein de 1' application. Ainsi, lorsque l'utilisateur clique sur un 
bouton Jouer, seul ce bouton recoit l'evenement correspondant au clic. 



Remarque 

Chaque evenement ne peut etre traite que parun seul objet a la fois. En revanche, un objet est capable de 
traiter plusieurs types d'evenements. 



Un clic ou un deplacement de souris sur le bouton Jouer ont pour resultat un comporte- 
ment propre a l'evenement recu. Le premier demarre par exemple un jeu, alors que le 
second modifie la couleur d'un autre bouton. 

Pour realiser 1' association type d'evenement-objet, la technique consiste a ajouter un 
ecouteur d'evenement sur l'objet donne, en lui specifiant le nom de l'evenement a traiter 
et Taction a mener. La syntaxe est la suivante : 

NomDeL' Objet. add Event Li stener(NomDel_' Evenement .quel 1 eActi on) ; 
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ou : 

• NomDeL ' Objet correspond au nom d'un objet cree par l'operateur new, ou un nom d'objet 
de type Sprite, ou encore defini par 1' intermediate du panneau Proprietes. 

• NomDeL' Evenement est un nom d'evenement defini par le langage ActionScript 3.0. 

Le langage ActionScript 3.0 definit un grand nombre d'evenements. Parmi ceux-ci, il 
existe des evenements de base que Ton utilise de facon constante. II s'agit des evene- 
ments associes au bouton et ceux lies au temps. lis s'appliquent aux objets de types clip 
d' animation, bouton et Sprite. 



Remarque 

II n'est pas possible d'ajouter un ecouteur d'evenement sur un objet de type Shape. 



Les evenements lies au bouton 

Les boutons sont des elements d'interaction tres importants dans les presentations Flash 
(site web, animations...). Le developpement d' applications Flash ne peut done s'effec- 
tuer sans une bonne connaissance des evenements standards lies a ces elements graphi- 
ques (clic, deplacement de la souris...). 

Ainsi, les evenements ayant pour nom MouseEvent.MOUSE_UP, MouseEvent.MOUSE_OVER, 
MouseEvent.MOUSE_OUT et MouseEvent.MOUSE_CLICK vont permettre de controler les actions et 
reactions d'un objet en fonction de la position du curseur et de l'etat du bouton de la 
souris (clique, relache. . .). 

Par exemple, l'ajout de l'ecouteur de l'evenement MouseEvent.MOUSEJJP sur le bouton 
egal : 

egal .add Event Listener (MouseEvent .M0USE_UP,gue7 leAction) ; 

fait que l'objet egal devient en mesure de traiter l'evenement MouseEvent.MOUSEJP, e'est- 
a-dire l'evenement associe au relachement d'un bouton de la souris. 

Les evenements lies au temps 

Les evenements lies au temps sont detectes par le lecteur Flash en fonction du deplace- 
ment de la tete de lecture. L'evenement le plus couramment utilise pour gerer le temps a 
pour nom Event. ENTER_FRAME. II est declenche automatiquement a chaque fois que la tete 
de lecture passe sur une image de la ligne de temps. Ainsi, si votre animation est definie 
sur 24 images par seconde, l'evenement onEnterFrame est declenche 24 fois par seconde. 

L'ajout de l'ecouteur de l'evenement Event. ENTER_FRAME sur l'objet bSavon (voir chapitre 
introductif de cet ouvrage, section « Qu'est qu'un programme sous Flash ? ») fait que 
l'objet bSavon detecte l'evenement Event. ENTER_FRAME tous les 24 e de seconde. 

Lorsqu'un objet est en mesure de detecter un evenement, il convient ensuite de decrire la 
ou les actions a realiser pour cet evenement. Cette description s'effectue a l'interieur 
d'un bloc d' instruction nomme fonction. 



Delink un gestionnaire d'evenement 

A un evenement sont associes un comportement, une action. Chaque objet capable de 
recevoir un evenement doit traiter ce dernier en realisant Taction attendue par l'utilisateur 
(un clic de souris sur un bouton Jouer lance le jeu attendu). 
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La mise en place d'un element d' interaction s'effectue done en deux temps : 

1. Definir l'association type d'evenement-objet. 

2. Decrire les actions realisees a reception de l'evenement. 



Remarque 

L'association type d'evenement-description des actions a realiser constitue, dans le jargon informatique, 
un gestionnaire d'evenement. 



Pour creer un gestionnaire d'evenement, la syntaxe est la suivante : 

//O Ajouter un ecouteur d'evenement 

NomDe L ' Ob j et.addEvent Listener (NomDeL' Evenement .quel leAction) ; 

//© Definir 1 'action a mener 

function quelleAction(e:TypeEvenenemt) :void( 

//instructions decrivant 1 'action 
} 

L'instruction O definit le nom de l'objet ainsi que l'evenement percu par l'objet. Les 
actions a realiser lorsque l'objet recoit l'evenement sont ensuite decrites dans le bloc © 
functionO { }. 

ds= Pour en savoir plus 

Les fonctions sonttraitees plus en detail au chapitre 7, « Les fonctions ». 
Les gestionnaires d'evenements pour le bouton egal 

Examinons sur un exemple plus concret comment ecrire differents gestionnaires 
d'evenements pour le bouton nomme egal , decrit en section precedente, de facon a ce 
que lorsque l'utilisateur : 

• Clique ou relache le bouton de la souris alors que le curseur de la souris se trouve sur 
le bouton egal , un message personnalise apparait dans la fenetre de sortie. 

• Fait simplement passer le curseur de la souris sur ce meme bouton, un message 
approprie apparait egalement dans la fenetre de sortie. 



Extension web 

Vous trouverez cet exemple dans le fichier GestionnaireEvenement.fi a, sous le repertoire Exemples/ 
Chapitre3. 

Evenement lie a une action de l'utilisateur 

• Evenement MouseEvent.MOUSE_DOWN 

L'evenement MouseEvent.MOUSE_DOWN est utilise pour detecter le fait que l'utilisateur 
appuie sur le bouton de la souris, lorsque le curseur se trouve sur l'objet auquel est associe 
l'evenement. Le gestionnaire d'evenement s'ecrit sous la forme suivante : 

egal .addEventListener(MouseEvent.MOUSE_DOWN, onAppuie) ; 
function onAppuie(event:MouseEvent) :void ( 
tracet "M0USE_D0WN : le bouton egal a ete enfonce") ; 

} 
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Ainsi, lorsque l'utilisateur appuie sur le bouton de la souris, le curseur etant positionne 
sur le bouton egal, la fonction onAppuieO est executee et le message « MOUSE_ 
DOWN : le bouton egal a ete enfonce » apparait dans la fenetre de sortie. 

• Evenement MouseEvent. MOUSEJJP 

L'evenement MouseEvent.MOUSE_UP est utilise pour detecter le fait que l'utilisateur cesse 
d'appuyer sur le bouton de la souris, lorsque le curseur se trouve sur l'objet auquel est 
associe l'evenement. Le gestionnaire d'evenement s'ecrit sous la forme suivante : 

egal .addEventListener(MouseEvent.MOUSE_UP, onRelache) ; 
function onRelache(event:MouseEvent) :void ( 

trace( "MOUSEJP : le bouton egal a ete relache") ; 

} 

Ainsi, lorsque l'utilisateur relache le bouton de la souris, le curseur etant positionne sur 
le bouton egal , la fonction onRel ache( ) est executee et le message « MOUSE_UP : le 
bouton egal a ete relache » apparait dans la fenetre de sortie. 

• Evenement MouseEvent.MOUSE_OVER 

L'evenement MouseEvent. MOUSEJVER est utilise pour detecter le fait que le curseur de la 
souris se trouve sur l'objet auquel est associe l'evenement. Le gestionnaire d'evenement 
s'ecrit sous la forme suivante : 

egal .addEventListener(MouseEvent.MOUSE_OVER,auSurvol ) ; 
function auSurvol (event:MouseEvent) :void ( 

trace( "M0USE_0VER : le curseur de la souris est sur le bouton egal"); 

} 

Ainsi, lorsque le curseur passe sur le bouton egal , le message « MOUSE_OVER : le 
curseur de la souris est sur le bouton egal » apparait dans la fenetre de sortie. 

• Evenement MouseEvent. MOUSEJUT 

L'evenement MouseEvent.MOUSE_OUT est utilise pour detecter le fait que le curseur de la 
souris sort de l'objet auquel est associe l'evenement. Le gestionnaire d'evenement 
s'ecrit sous la forme suivante : 

egal .add Event Listener (MouseEvent .MOUSE_0UT,al Exterieur) ; 
function alExterieur(event:MouseEvent):void { 

trace( "MOUSE_0UT : le curseur de la souris est sorti du bouton egal"); 

} 

Ainsi, lorsque le curseur sort du bouton egal , le message « MOUSE_OUT : le curseur 
de la souris est sorti du bouton egal » apparait dans la fenetre de sortie. 

• Evenement MouseEvent. CLICK 

L'evenement MouseEvent .CLICK est utilise pour detecter le fait que l'utilisateur appuie puis 
relache le bouton de la souris, le curseur de la souris se trouvant sur l'objet auquel est 
associe l'evenement. Le gestionnaire d'evenement s'ecrit sous la forme suivante : 

egal .add Even tListener(MouseEvent. CLICK, auClic) ; 
function auClic(event:MouseEvent) :void{ 

trace("CLICK : le bouton egal a ete enfonce puis relache "); 

} 
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Ainsi, lorsque l'utilisateur clique sur le bouton egal , la fonction auCl i c( ) est executee et 
le message « CLICK : le bouton egal a ete enfonce puis relache » apparait dans la fenetre 
de sortie. 

Evenement lie au temps 

• Evenement Event. ENTER_FRAME 

L'evenement Event . ENTER_FRAME est utilise pour detecter le deplacement de la tete de 
lecture du lecteur Flash, sur l'objet auquel est associe l'evenement. Le gestionnaire 
d'evenement s'ecrit sous la forme suivante : 

egal . addEvent Li stenert Event . ENTER_FRAME,sAnimer) ; 
function sAnimer(e: Event) :void( 

trace("ENTER_FRAME : evenement declenche"); 

} 

En supposant que votre animation est lue a raison de 18 images par seconde, le 
message « ENTER_FRAME : evenement declenche » est done affiche 18 fois par 
seconde. 



Remarque 

Le type d'evenement passe en parametre de la fonction sAnimer( ) est Event, alors que celui passe en 
parametre des fonctions auClicO, auSurvol ( )... est MouseEvent. 



k3= Pour en savoir plus 

Pour definir la cadence d'une animation (nombre d'images affichees par seconde), reportez-vous au 
chapitre introductif, « A la source d'un programme », section « Le scenario, les caiques, les images et les 
images-cles ». 

Une calculatrice pour faire des additions (suite et fin) 

Comme nous avons pu l'observer au cours de la section « Execution de 1' application » de 
ce chapitre, le resultat de 1' addition ne peut s'afficher qu'apres validation des valeurs 
saisies. 

Nous vous proposons de realiser cette validation en cliquant sur le bouton egal de la 
calculatrice. Pour cela, nous devons ecrire un gestionnaire d'evenement MouseEvent .M0USE_UP 
pour l'objet egal, dans lequel nous placerons les instructions de calcul de l'addition et 
l'affichage du resultat dans l'objet resultat. Le gestionnaire d'evenement s'ecrit comme 
suit : 

egal . addEvent Li stenert MouseEvent.MOUSEJJP, on Relache) ; 
function onRelache(event:MouseEvent) :void{ 
var a, b, c ; 

a = valeur_l.labelln.text; 

traceCa : " + a) ; 

b = valeur_2.1abelln.tex); 

traceCb : " + b) ; 

c = a + b; 

trace ( "c : "+ c) ; 

resultat. labelOut. text = c; 

} 



L' execution du programme montre que les valeurs sont bien enregistrees dans les varia- 
bles a et b apres avoir clique sur le bouton egal (voir figure 3-8). Cependant, vous pouvez 
constater que le resultat affiche ne correspond pas a celui attendu. 




Les valeurs saisies et enregistrees dans les variables a et b correspondent a des chaines de 
caracteres. L' addition de deux variables contenant des caracteres a pour resultat de placer 
les deux chaines l'une derriere l'autre dans la variable c. Ainsi, l'addition des caracteres 1 
et 2 a pour resultat le mot 12. Dans le jargon informatique, l'addition de caracteres est 
aussi appelee la « concatenation » de caracteres. 

Pour obtenir un resultat correct, nous devons traduire les valeurs saisies en valeurs nume- 
riques. Pour cela, ActionScript 3.0 propose la fonction predefinie Number ( ) qui convertit 
une chaine de caracteres passee en parametre, en valeur numerique. 



Remarque 

Les caracteres passes en parametres sont necessairement des caracteres numeriques. Ainsi, la 
chaine 12 peut etre convertie en valeur numerique, contrairement a douze qui ne peut I'etre. 



function onRel ache ( event :MouseEvent) :void{ 
var a, b, c:Number; 
a = Number (val eur_l . 1 abel In. text) ; 
b = Number (val eur_2. 1 abel In. text) ; 
c = a + b; 

resultat. labelOut. text = c; 

} 

Ainsi corrigee, 1' application fournit desormais un resultat correct (voir figure 3-9). 



Figure 3-9 

La calculatrice sait 
enfin additionner ! 
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Question 

Pourquoi vaut-il mieux utiliser I'evenement MouseEvent.MOUSEJP plutot que I'evenement 
MouseEvent.MOUSE_DOWN pour valider la saisie d'une valeur ? 

Reponse 

Avec I'evenement MouseEvent.MOUSE_DOWN, la validation des valeurs s'effectue au moment ou Ton 
presse le bouton de la souris.Avec I'evenement MouseEvent.MOUSEJP, la validation n'est realisee que 
lorsque I'on relache le bouton. Dans le cas ou la saisie esterronee, nous avons la possibilite, avec I'evene- 
ment MouseEvent.MOUSE_UP, de relacherle bouton de la souris en dehors du bouton egal pourempe- 
cher la validation et corriger I'erreur. Avec I'evenement MouseEvent.MOUSE_DOWN, I'erreur ne peut pas 
etre corrigee, I'evenement etantpris en compte des le debut du die, sans possibilite de reveniren arriere 
(voir extension web, fichier QuestionReponseMouse_Down.fla SOUS le repertoire Exemples/ 
Chapitre3). 



Les techniques de programmation incontournables 

Tout bouton ou element constituant l'interface graphique d'une application possede un 
comportement specifique que nous devons traduire sous la forme de programmes 
ActionScript 3.0. Ainsi, decrire les actions a realiser lors d'un clic de souris constitue le 
cceur d'un programme base sur la programmation evenementielle. Ces actions sont decri- 
tes par des instructions qui font appel le plus souvent a des techniques de base qu'il est 
indispensable de connaitre. Parmi celles-ci, examinons 1' incrementation qui est un 
precede tres utilise en informatique. 

Dans l'environnement Flash, 1' incrementation est tres utile, en particulier pour deplacer 
un objet sur la scene. Aussi, nous nous proposons de realiser un petit jeu simple qui va nous 
permettre de saisir tout l'interet de cette technique associee a la gestion des evenements. 

Ce jeu nous permettra egalement d' examiner des techniques plus specifiques a Flash, 
comme changer la couleur d'un objet en cours d'animation ou deplacer un objet a l'aide 
de la souris. 

Cahier des charges 

Le jeu consiste a faire eclater des bulles de savon a l'aide d'un curseur. Ce dernier ne se 
deplace qu'horizontalement et se situe vers le bas de la scene. 

Au lancement de l'animation, la scene se presente comme le montre la figure 3-10. 



Figure 3-10 

Le jeu a pour objectif 
de faire eclater 
les bulles a I 'aide du 
curseur triangulaire. 
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Lorsque le curseur de la souris se trouve sur le curseur triangulaire, le terme « Cliquer » 
remplace le terme « Jouer » afin d'inviter l'utilisateur a demarrer le jeu. 

Lorsque l'utilisateur clique sur le curseur Jouer, celui-ci change de couleur et une bulle 
de savon apparait puis descend a la verticale. Le curseur se deplace de gauche a droite et 
inversement, en fonction de la position de la souris. L'utilisateur doit deplacer le curseur 
de facon a se placer sous la bulle et faire eclater la bulle. 

Comme pour la calculatrice, la mise en place de ce jeu s'effectue en plusieurs etapes : 

• la definition des objets necessaires a l'application ; 

• le positionnement des objets a l'ecran ; 

• la description des comportements de chaque objet en fonction des actions de l'utilisateur. 

Toutes les fonctionnalites du jeu ne pourront etre realisees dans ce chapitre. Elles le 
seront au cours des chapitres a venir, lorsque les techniques (test, boucle. . .) necessaires a 
leur mise en oeuvre auront ete etudiees en detail. 



Definition des objets 

• La bulle 

La bulle est un simple objet defini comme un symbole de type Clip. Le symbole est 
nomme Bui 1 eCl p. Elle represente une bulle de savon, comme le montre la figure 3-1 1 : 



Figure 3-11 

Le symbole BulleClp 




Le curseur 

Le curseur represente par la figure 3-12 est un symbole de type CI i p nomme BoutonCl p. 
II est compose de deux caiques nommes Texte et Forme. 

Sur le premier caique se trouve une zone de texte dynamique contenant le terme 
« Cliquer ». La zone de texte est nommee 1 abel Out dans le panneau Proprietes associe 
(voir figure 3-12-0). Elle permet la modification de texte place sur le bouton, en cours 
d'execution du jeu. 

Pour modifier la couleur du fond du bouton lorsque le curseur de la souris se trouve 
dessus, nous placons sur le second caique deux objets : 
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1. Le contour du triangle, trace en noir et place en dehors du symbole (voir figure 3- 
12-©). 

2. La couleur de fond du bouton (triangle sans bord), placee a l'interieur d'un sym- 
bole (voir figure 3-12-©). 

Le symbole representant le fond est nomme FondCl p. La copie de ce symbole (l'instance), 
placee dans le clip BoutonClp est nommee fond, dans le panneau Proprietes associe (voir 
figure 3-12-G). 



Figure 3-12 

Le symbole Bouton- 
Clp 
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Remarque 

Le contour du triangle (©) ne varie ni de forme, ni de couleur. II n'est pas necessaire de I'enregistrer sous 
forme de symbole. 



Les zones de texte 

Les deux zones de texte sont utilisees pour afficher le nombre de bulles eclatees par le 
curseur, ainsi que le score realise. Ces deux zones d'affichage sont issues du meme 
symbole nomme AfficherClp. 

Le symbole Af f i cherCl p est un symbole de type CI i p. II est constitue de deux zones de 
texte dynamique et d'un rectangle permettant de colorer le fond de la zone d'affichage. 
Les deux zones de texte sont placees sur un caique nomme Texte, le rectangle sur un 
second caique nomme Fond. Le caique Texte est place au-dessus du caique Fond. 
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Chaque zone de texte porte un nom dans le panneau Proprietes qui les distingue l'une 
de l'autre. Celle situee au-dessus du rectangle est nommee titreOut, celle situee au 
centre a pour nom 1 abel Out (voir figure 3-13). 



Figure 3-13 

Le symbole BulleClp 



Incrementation, f la 



5 10 





Texte S 




^ Fond • • □ 


1 








"\ a 9 


i ■ a * [ 




Sequence 1 H AfficherCto 




Propriet^^^ Filtres | Parametr es | Action; 

Ti 



Texte dynamique j A Arial 

aw nr 




Positionnement des objets a I'ecran 

Comme le montre la figure 3-10, nous devons placer les objets de facon a ce que : 

• La bulle se situe au centre de I'ecran. 

• Le curseur soit centre horizontalement, vers le bas de la scene. 

• Un ecart de 5 % de la largeur de la fenetre separe les deux zones de texte du bord 
gauche de la fenetre. La zone de texte correspondant a l'affichage du score se situe au 
premier tiers de la hauteur, tandis que la zone de texte afhchant le nombre de bulles 
eclatees se trouve dans le second tiers. 

Ces contraintes sont realisees grace aux instructions suivantes : 

//Stocker la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 

//Calculer un ecart de 5 % de la largeur de la fenetre 
var ecart:Number = 5 * largeur / 100 ; 
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//Declarer et initialiser la variable Vitesse 
var vitesse:uint = 10; 

//Creer une instance de BoutonClp 

var btnJouer:BoutonClp = new BoutonClp( ) ; 

//Le curseur de la souris prend la forme d'une main au survol du bouton 
btnJouer.buttonMode = true; 

//Placer le curseur au centre sur l'axe des X et vers le bas 

btnJouer.x = largeur / 2; 

btnJouer.y = hauteur - btnJouer. height; 

addChi 1 d(btnJouer) ; 

//Creer une instance de BulleClp 
var bSavomBulleClp = new BulleClpO; 

//Placer la bulle au centre de la scene 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Creer les deux zones de texte 

var score:AfficherClp = new Aff icherCl p( ) ; 

var eclats:AfficherClp = new AfficherClpt ) ; 

//Placer les zones de texte sur le bord gauche de la scene 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChi 1 d(score) ; 
addChild(eclats) ; 

//Donner un titre aux deux zones de texte 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat / Total"; 



Remarque 

Observez I'instruction : 

btnJouer.buttonMode = true; 

E lie a pour role d'afficher le curseur de la souris non plus comme une fleche mais sous la forme d'une 
main lorsque le curseur survole I'objet btnJouer. De cette fagon, 1'utilisateur s'attend a voir I'objet 
btnJouer se comporter comme un bouton et non comme un clip. 



La bulle se deplace vers le bas, a chaque die 

Pour deplacer un objet sur la scene, il suffit de modifier ses coordonnees en X et en Y. 
Deplacer un objet vers la droite ou vers la gauche s'effectue en modifiant les coordon- 
nees en X, alors que deplacer un objet vers le haut ou le bas, s'accomplit en modifiant les 
coordonnees en Y. 
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Ici, la bulle doit etre deplacee vers le bas lorsque l'utilisateur clique sur le curseur. En 
supposant que la bulle soit placee en 150 sur l'axe des Y, pour voir descendre la bulle au 
moment du clic, il suffit de la deplacer en 151 au premier clic, puis en 152 au clic suivant, 
puis en 153... 

ds= Pour en savoir plus 

Le systeme de coordonnees qui permet de placer des objets sur la scene est decrit au chapitre introductif 
de cetouvrage, a la section « Qu'est-ce qu'un programme sous Flash ? ». 

La propriete y de l'objet a deplacer prend les valeurs 150, 151, 152, . . . Elle augmente de 1 
a chaque clic. 

Pour augmenter (dans le jargon informatique on dit « incrementer ») une valeur de 1, la 
solution consiste a utiliser l'instruction suivante : 

a = a + 1 

En effet, comme nous avons pu le remarquer au cours du chapitre 1 , « Traiter les 
donnees », a la section « Quelques confusions a eviter », cette instruction ajoute 1 a la 
valeur de a situee a droite du signe = et enregistre la valeur augmentee de 1 dans la meme 
variable a grace au signe d' affectation. L'enregistrement efface la valeur precedemment 
enregistree. 

Pour realiser 1' incrementation sur la bulle de savon, il suffit de remplacer la variable a par 
la position de l'objet sur l'axe des Y, a savoir bSavon .y. Cette instruction s'insere dans le 
gestionnaire d'evenement MouseEvent.M0USE_D0WN, comme suit : 

I btnJouer.addEventListener(MouseEvent.MOUSE_UP, onAppuie); 
function onAppuieCe: Event) ( 
bSavon.y = bSavon.y +1; 

De cette facon, a chaque fois que l'utilisateur clique sur le curseur, la position de la bulle 
(bSavon.y) est incrementee de 1, ce qui a pour resultat de la deplacer de 1 pixel vers le bas 
de la scene (voir figure 3-14). 



Figure 3-14 




Le centre de la bulle 
se deplace de 1 pixel 
a chaque clic. 
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Code complet de incrementation.fla 
Extension web 

Vous trouverez cet exemple dans le fichier incrementation.fla, sous le repertoire Exemples/ 
Chapitre3. 

//Stocker la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 

//Calculer un ecart de 5 % de la largeur de la fenetre 
var ecart: Number = 5 * largeur / 100 ; 

//Declarer et initialiser la variable vitesse 
var vitesse:uint = 10; 

//Creer une instance de BoutonClp 

var btnJouenBoutonClp = new BoutonClpO; 

//Le curseur de la souris prend la forme d'une main au survol du bouton 
btnJouer.buttonMode = true; 

//Placer le curseur au centre sur l'axe des X et vers le bas 

btnJouer.x = largeur / 2; 

btnJouer.y = hauteur - btnJouer. height; 

addChi 1 d(btnJouer) ; 

//Creer une instance de BulleClp 

var bSavomBulleClp = new BulleClpO; 

//Placer la bulle au centre de la scene 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Creer les deux zones de texte 

var score:AfficherClp = new Aff icherCl p( ) ; 

var eclats:AfficherClp = new Aff i cherCl p( ) ; 

//Placer les zones de texte sur le bord gauche de la scene 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChild(score); 
addChild(eclats) ; 

//Donner un titre aux deux zones de texte 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat / Total"; 

//Definir un gestionnaire d'evenement MouseEvent.MOUSE_DOWN pour le curseur 
btnJouer.iddEventListener(MouseEvent.MOUSE_DOWN. onAppuie) ; 
function onAppuiete: EventH 
bSavon.y = bSavon.y +1; 

} 
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La bulle se deplace toute seule en un seul die 

L'objectif n'est plus ici de deplacer la bulle en cliquant sur le curseur - ce qui est plutot 
fastidieux -, mais que la bulle se deplace toute seule vers le bas de la fenetre des que 
l'utilisateur clique sur le curseur. 

Pour cela, deux evenements sont a traiter : 

• L'evenement MouseEvent.MOUSE_DOWN, puisque l'utilisateur doit cliquer sur le curseur 
pour lancer 1' animation. 

• L'evenement Event. ENTER_FRAME pour que la bulle se deplace d'un cran vers le bas a 
chaque fois que ce dernier est declenche par le lecteur Flash. 



Extension web 

Vous trouverez cet exemple dans le fichier AnimationBiille.fi a, sous le repertoire Exemples/ 
Chapitre3. 



Le gestionnaire d'evenement onEnterFrame est compose des instructions suivantes : 

bSavon . add Event Li stener( Event . ENTER_FRAME,seDepl ace) ; 
function seDeplace(e: Event) :void{ 

//La bulle se deplace d'un point a chaque 
//emission de l'evenement 
bSavon.y = bSavon.y +1; 

} 

II permet de realiser le deplacement de l'objet bSavon toutes les 18 images par seconde. 

Le deplacement automatique n'est realise que lorsque l'utilisateur clique sur le curseur, 
e'est pourquoi nous devons modifier la fonction onAppuie( ) du gestionnaire d'evenement 
MouseEvent.MOUSE_DOWN comme suit : 

function onAppuie(event:MouseEvent) :void { 

bSa von. addEvent Li stenert Event. ENTER_FRAME,seDepl ace) ; 

} 

En inserant l'ecouteur d'evenement Event. ENTER_FRAME sur l'objet bSavon, nous sommes 
assures que ce dernier ne se declenchera que lorsque l'utilisateur aura clique sur le 
curseur. L' animation de la bulle ne s'effectue qu'a cette condition. 

Code complet de animationBulle.fla 

Les deux gestionnaires d'evenements MouseEvent.MOUSE_DOWN et Event. ENTER_FRAME s'inserent 
dans le code ActionScript 3.0 precedent de la facon suivante : 

//Stocker la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 
var ecart:Number = 5 * largeur / 100 ; 



//Le bouton btnJouer 

var btnJouer:BoutonClp = new BoutonClpO; 

btnJouer. buttonMode = true; 

btnJouer. x = largeur / 2; 

btnJouer. y = hauteur - btnJouer. height; 

addChild(btnJouer) ; 
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//La bulle de savon 
var bSavomBulleClp = new BulleClpO; 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Les zones de texte 

var score:AfficherClp = new AfficherClp( ) ; 
var eclats:AfficherClp = new Aff i cherCl p( ) ; 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChild(score); 

addChild(eclats) ; 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat / Total"; 

//Definir un gestionnaire d'evenement MouseEvent.MOUSE_DOWN 
//pour le curseur 

btnJouer.addEventListener(MouseEvent.MOUSE_DOWN, onAppuie) ; 
function onAppuie (event:MouseEvent) :void { 

//Definir un gestionnaire d'evenement Event. ENTER_FRAME 

//pour la bulle de savon 
bSavon. addEvent Li stener( Event. ENTER_FRAME, seDepl ace) ; 

} 

function seDepl ace(e: Event) :void{ 

//La bulle se deplace d'un point a chaque 
//emission de 1'evenement Event. ENTER_FRAME 
bSavon.y = bSavon.y +1; 

} 

La bulle se deplace plus vite depuis I'exterieur de la fenetre 

La bulle ne se deplace pas tres vite, aussi nous aimerions augmenter sa vitesse de depla- 
cement. 

Le deplacement de la bulle est realise par le pas d'incrementation. 



Remarque 




Lorsque I'instruction d'incrementation s'ecrit i = 


i + n, n est appele le « pas d'incrementation ». 



Jusqu'a present, nous avons deplace la bulle de 1 pixel a chaque fois. Mais rien ne nous 
interdit de modifier cette valeur, de facon a ce que la bulle se deplace plus rapidement 
vers le bas de la scene. 

Nous pouvons ainsi ecrire : 

function seDepl ace(e: Event) :void{ 

//La bulle se deplace de 10 pixels a chaque 
//emission de 1'evenement Event. ENTER_FRAME 
bSavon.y = bSavon.y + 10; 

} 

Dans ce cas, la bulle se deplace de 10 en 10 et non plus de 1 en 1. 
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Pour faciliter de developpement, il est conseille de ne pas ecrire une valeur specifique 
d' incrementation, mais de l'enregistrer dans une variable declaree en debut de 
programme. Ainsi, si vous n'etes pas satisfait de la facon dont se deplace la bulle, il vous 
suffit de modifier la variable et non pas d'aller rechercher dans le code l'endroit ou se 
trouve 1' instruction d' incrementation pour en modifier la valeur. 

Aussi, nous declarons la variable vitesse de la facon suivante : 

var vitessemint = 10; 

et nous transformons le gestionnaire Event. ENTER_FRAME comme suit : 

function seDepl ace(e: Event) : void{ 
bSavon.y = bSavon.y + vitesse; 

ds= Pour en savoir plus 

L'utilisation de la variable vitesse nous sera egalement tres utile lorsque nous animerons plusieurs 
bulles avec des vitesses differentes calculees aleatoirement. Voir I'exercice 5.4 du chapitre 5, « Faire des 
repetitions ». 

Une fois cela fait, la bulle se deplace beaucoup plus vite. 

Pour finir, nous devons deplacer la position initiale d'affichage de la bulle. En effet, dans 
le jeu, les bulles traversent la scene de haut en bas. Elles ne partent pas du centre de 
l'ecran. Pour cela, nous transformons 1' instruction : 

bSavon.y = (hauteur) / 2; 

en 

bSavon.y = -bSavon. height; 

Ainsi initialise, l'objet bSavon s'affiche non plus au centre mais en dehors de l'ecran, au- 
dessus de la scene, comme le montre la figure 3-15. 



Figure 3-15 

La bulle est placee 
au-dessus de la 
scene et descend des 
le premier clic sur 
le curseur. 




Extension web 

Vous trouverez cetexemple dans le fichier AnimationBulleVitesse.fla, sous le repertoire Exemples/ 
Chapitre3. 
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Code complet de animationBulleVitesse.fla 

La nouvelle position de la bulle et son deplacement plus rapide s'inserent dans le code 
ActionScript 3.0 precedent de la facon suivante : 

//Stocker la hauteur et la largeur de la scene 
var largeur:uint = stage. stageWidth; 
var hauteur:uint = stage. stageHeight; 
var ecart: Number = 5 * largeur / 100 ; 

//Definir la vitesse 
var vitesse:uint = 10; 

//Le bouton btnJouer 

var btnJouenBoutonClp = new BoutonClpO; 

btnJouer. buttonMode = true; 

btnJouer. x = largeur / 2; 

btnJouer. y = hauteur - btnJouer. height; 

addChi 1 d(btnJouer) ; 

//La bulle de savon 
var bSavomBulleClp = new BulleClpO; 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Les zones de texte 

var score:AfficherClp = new AfficherClpt ) ; 
var eclats:AfficherClp = new Aff i cherCl p( ) ; 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChild(score); 

addChild(eclats) ; 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat / Total"; 

//Definir un gestionnaire d'evenement MouseEvent.M0USE_D0WN pour le curseur 
btnJouer. addEventListener(MouseEvent.MOUSE_DOWN, onAppuie) ; 
function onAppuie (event:MouseEvent) :void { 

//Definir un gestionnaire d'evenement Event. ENTER_FRAME pour la bulle de savon 

bSavon. add Event Li stener( Even t.ENTER_FRAME,seDepl ace) ; 

} 

function seDeplace(e: Event) :void{ 

//La bulle se deplace de la valeur contenue dans la variable vitesse a chaque 
//emission de 1'evenement Event. ENTER_FRAME 
bSavon.y = bSavon.y + vitesse; 

} 

Notation condensee de Incrementation 

L' incrementation est une technique de base de programmation, quel que soit le langage 
utilise. Ce type d' instruction est si courant, que les developpeurs de langage en ont defini 
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une forme condensee, afin de simplifier l'ecriture des programmes. Ainsi, depuis le 
langage C, en passant par Java, JavaScript, PHP ou ActionScript, la convention d'ecriture 
de 1' incrementation est devenue la suivante : 



Tableau 3-1 Les differentes formes de notation condensee de ('incrementation 





Instruction developpee 


Instruction condensee 


Increment de 1 


1=1+1: 


1++: 


Increment de n 


1 = 1 + n ; 


1 += n; 


Decrement de 1 


1=1-1; 


1 — i 


Decrement de n 

I 


1 = 1 - n ; 


1 - = n ; 



L' incrementation permet d'augmenter la valeur de 1 ou de n selon 1' instruction choisie. 
A l'inverse, la decrementation diminue la valeur de 1 ou de n. 

II est egalement possible d'utiliser ce mode d'ecriture pour les operateurs tels que la 
multiplication ou la division. Ainsi : 

i *= n ; se traduit par : i = i * n ; 

ou encore : 

1 /= n; se traduit par : 1 = 1 / n; 



Question 

Que se passe-t-il si Ton remplace bSavon.y+=vitesse par bSavon.y/=vitesse dans le gestionnaire 
de I'evenement Event . enter_frame applique a I'objet bSavon ? 

Reponse 

Dans le premier cas, (bSavon.y+=vitesse), I'objetse deplace vers le bas avec un ecart correspondant 
a la valeur stockee dans la variable vitesse. Dans le deuxieme cas, la position de I'objet est divisee par 
vi tesse. 

Si Ton suppose que I'objet est place en 400 en Y, et que vitesse vaut 2, la position suivante vaudra 
200 (400 / 2), puis 100 (200 / 2), puis 50 (100 / 2)... L'objet se deplace done vers le haut, se 
rapprochant de plus en plus lentement vers 0. En effet, plus le nombre est divise, plus le resultat 
s'approche de 0 (voir extension web, fichierQuestionReponseVitesse.fi a sous le repertoire Exemples/ 
Chapitre3). 



Le curseur change de couleur 

Examinons maintenant une technique plus specifique au langage ActionScript 3.0, a 
savoir changer la couleur d'un objet en cours d' animation. Pour cela, nous allons modi- 
fier la couleur du bouton d' action du jeu (appele « curseur » dans les sections precedentes) 
lorsque le curseur de la souris survole ce dernier. 
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Definir les gestionnaires d'evenements 

Lorsque le curseur de la souris se trouve en dehors du bouton d' action du jeu, la couleur 
de fond du bouton est blanche. Lorsque le curseur de la souris se trouve sur le bouton 
d'action, la couleur change pour devenir vert pale. 



Extension web 

Vous trouverez cet exemple dans le fichier ChangeCouleur.fi a, sous le repertoire Exemples/ 
Chapitre3. 



La modification de la couleur ne s'effectue que lorsque la souris survole le bouton d'action 
du jeu. Les instructions modifiant la couleur doivent done etre inserees a l'interieur 
des gestionnaires d'evenements de type MouseEvent.MOUSE_OVER et MouseEvent.MOUSE_OUT. 
lis concernent uniquement l'objet btnJouer. La structure d'appel des gestionnaires s'ecrit 
comme suit : 

//Lorsque la souris est sur le curseur Jouer 
btnJouer.addEventListener(MouseEvent.MOUSE_OVER,colorierEnBleu) ; 
//Lorsque la souris n'est plus sur le curseur Jouer 
btn Jouer. addEvent Li stener(MouseEvent.MOUSE_OUT, col orierEnBlanc) ;v 
function col ori erEnBl eu(e: Event) :void{ 
//La couleur de fond du curseur devient bleue 

} 

function col ori erEnBl anc(e: Event) :void{ 

//La couleur de fond du curseur devient blanche 

} 

Modifier la couleur du curseur 

Pour modifier la couleur d'un objet, nous devons faire appel a une methode predefinie du 
langage ActionScript 3.0. La technique consiste a creer un objet qui met en relation 
la couleur et l'objet a colorier. Cette relation s'effectue a l'aide des outils de la classe 
ColorTransform. 

La toute premiere instruction demande done d'importer ces outils, pour que le programme 
puisse les utiliser. Ceci est realise grace a 1' instruction : 

import f 1 ash .geom. ColorTransform; 

Ensuite, le coloriage a proprement parle est realise au sein des fonctions col ori erEnBl eu( ) 
et col ori erEnBl anc() comme suit : 

function colorierEnBleute: Event) :void{ 
//O Definir l'objet support de couleur 
var bleu:ColorTransform = new ColorTransfornU ) ; 

//© La couleur bleu 

bleu. color = 0x33CCCC; 

//© Associer le fond et la couleur 

var objetAcolorier:Transform = new Transform(btnJouer.fond) ; 
//© Colorier en bleu 
objetAcolorier. ColorTransform = bleu; 

} 
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//Lorsque la souris n'est plus sur le curseur 
function col orierEnBlancte: Event) :void{ 

//© Definir l'objet support de couleur 

var blancrColorTransform = new ColorTransfornU ) ; 

blanc. color = OxFFFFFF; 

var objetAcolorienTransform = new Transform(btnJouer.fond) ; 
objetAcolorier. ColorTransform = blanc; 

} 

O Pour changer la couleur, la premiere etape consiste a definir un objet de type 
ColorTransform, en utilisant l'operateur new. L'objet ainsi defini est ensuite utilise pour 
definir la couleur a utiliser pour le coloriage. Ici, dans chacune des fonctions un objet 
bl eu ou bl anc est cree. Les noms bl eu et bl anc ont ete choisis pour faciliter la lecture du 
programme. Nous aurions pu choisir d'autres mots comme coul eur ou codeCouleur. 

© La couleur de l'objet bleu est initialisee a l'aide du code couleur 0x33CCCC et celle 
de l'objet bl anc est initialisee a l'aide du code couleur OxFFFFFF, par 1' intermediate de la 
propriete color. 

ds= Pour en savoir plus 

Pour trouver le code couleur de la couleur avec laquelle vous souhaitez colorier le fond de votre bouton, 
reportez-vous au chapitre 2, « Les symboles », section « Creer une occurrence d'un objet qui n'existe pas 
dans la bibliotheque ». 

© Pour expliquer au lecteur Flash, que le fond du bouton doit etre colorie en bleu ou en 
blanc, nous devons mettre en relation la couleur avec le fond du bouton. L' instruction : 

var objetAcolorier:Transform = new TransfornUzoneDeCol ori age) ; 

realise cette association, en passant en parametre du constructeur Transformt ) l'objet que 
Ton souhaite colorier. Pour notre exemple, l'objet a colorier est defini a l'interieur du 
symbole BoutonClp. II s'agit de l'occurrence du symbole FondClip que nous avons pris 
soin de nommer fond, dans le panneau Proprietes associe au symbole (voir figure 3-12). 

L'objet fond est defini a l'interieur du symbole BoutonClp. Pour modifier sa couleur, nous 
devons utiliser la notation objet btnJouer.fond. 

© La derniere instruction permet de modifier la couleur de l'objet par celle definie dans 
la propriete de l'objet blanc ou bleu. Pour notre exemple, les couleurs choisies sont un 
vert clair dont la valeur hexadecimale vaut 0x33CCCC ou un blanc de valeur hexadecimale 
egale a OxFFFFFF. 

Code complet de changeCouleurCurseur.fla 

La mise en place de la couleur et des gestionnaires MouseEvent.MOUSEJVER et 
MouseEvent.MOUSEJUT s'insere dans le code ActionScript 3.0 precedent de la facon 
suivante : 

//Importer les outils de coloriage 
import f 1 ash. geom. ColorTransform; 
import flash. events.*; 

//Stocker la hauteur et la largeur de la scene 

var largeur:uint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

//Calculer un ecart de 5% de la largeur de la fenetre 

var ecartiNumber = 5 * largeur / 100 ; 
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//Declarer et initialiser la variable Vitesse 

var vitesse:uint = 10; 

// Le bouton btnJouer 

var btnJouenBoutonClp = new BoutonClpO; 

btnJouer. x = largeur / 2; 

btnJouer. y = hauteur - btnJouer. height; 

btnJouer. buttonMode = true; 

addChi 1 d(btnJouer) ; 

//La bul le de savon 
var bSavon:BulleClp = new BulleClpO; 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Les zones de texte 

var score:AfficherClp = new Aff icherCl p( ) ; 
var eclats:AfficherClp = new Aff i cherCl p( ) ; 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChi 1 d(score) ; 

addChild(eclats) ; 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat"; 

//Les gestionnaires d'evenements 

btnJouer.addEventListener(MouseEvent.MOUSE_DOWN,onAppuie) ; 
function onAppuie(e:Event){ 

bSa von. add Event Listener (Event . ENTER_FRAME,seDepl ace) ; 

} 

function seDepl ace(e: Event) : void( 
bSavon.y = bSavon.y +vitesse; 

} 

btnJouer.addEventListener(MouseEvent.MOUSE_OVER.colorierEnBleu) ; 
function col orierEnBleu(e: Event ) :void{ 

//La couleur 0x33CCCC 

var bleu:ColorTransform = new ColorTransformO; 
bleu. col or = 0x33CCCC; 

var objetAcolorier:Transform = new Transform(btnJouer.fond) ; 
objetAcolorier.colorTransform = bleu; 

} 

btnJouer.addEventListener(MouseEvent.MOUSE_OUT,col orierEnBl anc) ; 
function col orierEnBl anc(e: Event) :void{ 

//La couleur OxFFFFFF 

var blanc:ColorTransform = new ColorTransformO; 
blanc. color = OxFFFFFF; 

var objetAcolorier:Transform = new Transform(btnJouer.fond) ; 
objetAcolorier.colorTransform = blanc; 

} 
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Le curseur se deplace horizontalement 

Dans notre jeu, le curseur se deplace horizontalement pour permettre a l'utilisateur de 
toucher le plus de bulles possible. Le mouvement du curseur est lie au deplacement de la 
souris. 

Pour deplacer un objet en fonction des mouvements de la souris, ActionScript 3.0 
propose les methodes startDragC ) et stopDrag( ). La syntaxe d'utilisation de ces methodes 
est la suivante : 

objetADepl acer.startDrag( ) ; 
objetADepl acer. stopDrag( ) ; 

La premiere instruction fait que l'objet a deplacer « s'accroche » au curseur de la souris 
et le suit dans tous ses mouvements. La seconde instruction stoppe le processus et l'objet 
est relache des l'appel de la methode stopDrag( ). 

Ces instructions ne peuvent pas etre placees ainsi dans un programme. II est necessaire de les 
inserer dans les gestionnaires d'evenements MouseEvent.MOUSE_DOWN et MouseEvent.MOUSEJJP. 
En effet, l'objet suit le deplacement de la souris lorsque l'utilisateur clique sur celui-ci et 
il s'arrete lorsque l'utilisateur cesse de cliquer, c'est-a-dire lorsqu'il relache le bouton de 
la souris. La structure des gestionnaires d'evenements s'ecrit done comme suit : 

btnJouer.addEventListener(MouseEvent.MOUSE_DOWN, leCurseurSeDeplace) ; 
function leCurseurSeDeplace(event:MouseEvent) :void ( 

bSa von. addEvent Li stenert Event. ENTER_FRAME,seDepl ace) ; 

btnJouer. startDrag( ) ; 

} 

btnJouer. addEvent Li stener(MouseEvent.MOUSE_UP, leCurseurSarrete) ; 
function leCurseurSarrete(event:MouseEvent) :void { 
btnJouer. stopDrag( ) ; 

} 

Ainsi mis en place, le curseur btnJouer se deplace avec la souris sur toute la scene et non 
sur un axe horizontal. 

Pour realiser un deplacement avec contrainte (deplacement horizontal, vertical ou dans 
une zone determinee), la methode startDrag( ) dispose d'un parametre definissant le peri- 
metre de deplacement de l'objet (voir figure 3-17). La syntaxe d'appel de la methode 
avec parametres est la suivante : 

| startDrag(verrouiller, zoneDeDepl acement) 

oii : 

• verrouiller correspond a une valeur booleenne qui indique la facon de positionner le 
curseur de la souris sur l'objet au moment de « l'accrochage ». Lorsque verrouiller 
vaut false, le curseur de la souris reste sur le point ou l'utilisateur a clique, sinon le 
curseur se positionne automatiquement au centre de l'objet. 

• zoneDeDepl acement est un rectangle qui definit la zone dans laquelle l'objet peut se 
deplacer avec la souris, comme le montre la figure 3-16. 

Pour notre jeu, le curseur doit se deplacer le long d'une ligne horizontale passant par la 
position initiale du curseur. II ne peut se deplacer en hauteur. Le rectangle correspond 
done a un rectangle de hauteur nulle, de largeur egale a la largeur de la scene. Lorigine 
du rectangle est placee sur le bord gauche de la scene, a la hauteur du curseur. 
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Figure 3-16 

Le second parametre 
de la methode 
startDragi ) definit 
la zone de depla- 
cement de Vobjet 
selectionne. 




hauteur 



largeur 



Pour toutes ces raisons, la zone de emplacement est definie en utilisant un objet de type 
Rectangl e, dont les parametres de creation sont les suivants : 

var zoneDeplacement: Rectangle = new RectangleCO, btnJouer.y, largeur, 0); 

Le gestionnaire d'evenement MouseEvent.M0USE_D0WN s'ecrit alors comme suit : 

btnJouer.addEventListener(MouseEvent.MOUSE_DOWN, 1 eCurseurSeDepl ace) ; 
function leCurseurSeDeplace(event:MouseEvent):void ( 
bSa von. add Event Li stener( Even t.ENTER_FRAME,seDepl ace) ; 
var zoneDeplacement: Rectangle = new RectangletO, btnJouer.y, largeur, 0); 
btnJouer . startDrag(true,zoneDepl acement) ; 

} 



Extension web 

Vous trouverez cet exemple dans le fichier DeplaceCurseur.fi a, sous le repertoire Exemples/ 
Chapitre3. 



Code complet de deplaceCurseur.fla 

Le deplacement du curseur et les gestionnaires MouseEvent. MOUSE JOWN et MouseEvent.MOUSE_UP 
s'inserent dans le code ActionScript 3.0 precedent de la facon suivante : 

//Stocker la hauteur et la largeur de la scene 

var largeur:uint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

//Calculer un ecart de B% de la largeur de la fenetre 

var ecart: Number = 5 * largeur / 100 ; 



//Declarer et initialiser la variable vitesse 
var vitesse:uint = 10; 



//Le bouton btnJouer 

var btnJouer:BoutonClp = new BoutonClpO; 

btnJouer. x = largeur / 2; 

btnJouer.y = hauteur - btnJouer. height; 

btnJouer. buttonMode = true; 

addChi 1 d(btnJouer) ; 
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//La bulle de savon 
var bSavon:BulleClp = new BulleClpO; 
bSavon.x = (largeur ) / 2; 
bSavon.y = (hauteur) / 2 ; 
addChild(bSavon) ; 

//Les zones de texte 

var score :AfficherClp = new AfficherClpt ) ; 
var eclats:AfficherClp = new Aff icherCl p( ) ; 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChild(score) ; 

addChild(eclats) ; 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat"; 

//Les gestionnaires d'evenements de 1 'animation 
function seDepl ace(e: Event) : void! 
bSavon.y = bSavon.y +vitesse; 

} 

//Le coloriage 

btnJouer.addEventListener(MouseEvent.MOUSE_OVER,colorierEnBleu) ; 
function col orierEnBl eu(e: Event) : void{ 

//La couleur 0x33CCCC 

var bleu:ColorTransform = new Col orTransform( ) ; 
bleu. color = 0x33CCCC; 

var objetAcolorier:Transform = new Transform(btnJouer.fond) ; 
objetAcolorier.colorTransform = bleu; 



btnJouer.addEventListener(MouseEvent.MOUSE_OUT,colorierEnBlanc) ; 
function col orierEnBl anc(e: Event) : void{ 

//La couleur OxFFFFFF 

var blanc:ColorTransform = new Col orTransform( ) ; 
blanc. color = OxFFFFFF; 

var objetAcolorier:Transform = new Transform(btnJouer.fond) ; 
objetAcolorier.colorTransform = blanc; 

} 

//Le deplacement du curseur 

btnJouer. addEvent Li stener(MouseEvent.MOUSE_DOWN,leCurseurSeDepl ace) ; 
function leCurseurSeDeplace(event:MouseEvent):void { 

bSavon. addEvent Li stenert Event. ENTER_FRAME. seDepl ace) ; 

var zoneDeplacement:Rectangle = new Rectangle(0, btnJouer.y, largeur, 0); 

btnJouer.startDrag(true.zoneDeplacement) ; 



btnJouer. addEvent Li stener(MouseEvent.MOUSE_UP, leCurseurSarrete) ; 
function leCurseurSarrete(event:MouseEvent) :void { 
btnJouer. stopDrag( ) ; 



} 



} 
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Memento 

Saisie d'une valeur au clavier 

La saisie d'une valeur au clavier s'effectue par 1' intermediate d'une zone de texte de 
saisie nommee, par exemple, label In dans le panneau Proprietes. Si la zone de saisie est 
definie a l'interieur d'un objet, l'instruction suivante enregistre la valeur contenue dans la 
variable a. 

a = objet. labelln. text; 

Afficher une valeur en cours d 'animation 

L'affichage d'une valeur en cours d'animation s'effectue par 1' intermediate d'une zone 
de texte dynamique nommee, par exemple, label Out dans le panneau Proprietes. Si la 
zone de texte est definie a l'interieur d'un objet, l'instruction suivante affiche le contenu 
de la variable a a l'ecran. 

objet. labelOut. text = a; 

Les valeurs saisies au clavier sont de type textuel. La methode NumberO permet de les 
transformer en valeurs numeriques. 

Definir un gestionnaire d'evenement 

Pour creer un gestionnaire d'evenement, la syntaxe est la suivante : 

//© Ajouter un ecouteur d'evenement 

NomDeL ' Objet . addEventLi stener ( NomDeL ' Evenement .quel 1 eActi on ) ; 

//© Definir quelle action mener 

function quel 1 eActi on(e:TypeEvenenemt) : void{ 

//Instructions decrivant 1 'action 

} 

Les evenements MouseEvent.MOUSEJJP, MouseEvent .M0USE_D0WN, MouseEvent .MOUSEJWER et 
MouseEvent.MOUSE_OUT sont utilises pour definir les gestionnaires d'evenements lies a la 
souris. 

Le gestionnaire ci-apres a pour resultat de colorier en rouge un objet, lorsque l'utilisateur 
clique sur ce dernier. 

objet .addEventLi stener (MouseEvent. CLICK, col orierEnRouge) ; 
function colorierEnRouge (e:Event):void( 
var couleur:ColorTransform = new Col orTransform( ) ; 
couleur. color = OxFFOOOO; 
var objetAcolorier:Transform = new Transform(objet) ; 
objetAcolorier.colorTransform = couleur; 

} 

L'evenement Event. ENTERJRAME est associe a la cadence de l'animation. Le gestionnaire 
ci-apres a pour resultat de deplacer un objet automatiquement le long de l'axe horizontal. 

objet. addEventLi stener ( Even t.ENTER_FRAME,seDepl ace) ; 
function seDeplace(e:Event) :void{ 
objet. x = objet. x + vitesse; 

} 
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L' instruction objet.x = objet.x + vitesse; est une instruction tres courante en program- 
mation. Elle permet d'augmenter une variable de la valeur enregistree dans vitesse. On 
dit que objet.x est « increments » de vitesse. La variable vitesse est appelee « pas 
d' incrementation ». 



Exercices 

Saisir ou afficher un texte en cours d'animation 
Exercice 3.1 

L'objectif est d'ecrire un formulaire demandant la saisie du login et du mot de passe d'un 
utilisateur comme le montre la figure 3-17. 



Figure 3-17 

Saisir un login 
et un mot de passe 




La realisation de cette application passe par les etapes suivantes : 



Extension web 

Pour vous faci liter la tache, les symboles proposes dans cet exercice sont definis dans le fichier 
Exercice3_l .fl a situe dans le repertoire Exercices/SupportPourRealiserLesExercices/ 
Chapitre3. Dans ce meme repertoire, vous pouvez accedera I'a pplication telle que nous souhaitons la 
voirfonctionner(Exercice3_l.swf) une fois realisee. 



Definition des objets necessaires a I'application 

1. Creez un symbole SaisirClp compose : 

- d'une zone rectangulaire representant le fond de la zone de saisie ; 

- d'une zone de texte de saisie nominee 1 abel In, centree sur la zone rectangulaire ; 

- d'une zone de texte dynamique nominee label Out, situee au-dessus de la zone de 
saisie. 
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2. Creez un symbole BoutonCl p pour valider la saisie de donnees. 

3. A l'aide de l'operateur new, creez les objets login, motDePasse et OK a partir des symbo- 
les Saisi rClp et BoutonCl p, respectivement. Login et motDePasse sont tous les deux issus 
du meme symbole. 

Positionnement des objets a I'ecran 

4. Placez les objets 1 ogi n, motDePasse et OK, sur la scene sachant que : 

- L'objet 1 ogi n se situe dans le quart superieur gauche de la scene. Un ecart de 5 % de 
la largeur de la scene le separe de son bord gauche. 

- L'objet motDePasse se trouve juste en dessous de l'objet login. 

- L'objet OK se trouve a cote de l'objet motDePasse avec un ecart de 5 % de la largeur 
de la scene. 

5. Ann de distinguer le champ de saisie du login de celui du mot de passe, le texte 
« Login » est place dans le champ label Out de l'objet login et « Mot de passe » est 
place dans le champ label Out de l'objet motDePasse. 



Remarque 

La saisie du motde passe peutetre securisee en initialisantla propriete displayAsPassword du champ 
l abel in de l'objet motDePasse a true. Dans ce cas, les caracteres saisis ne sont pas affiches dans la 
zone de texte. 



Description des actions 

Lorsque l'utilisateur valide la saisie des informations entrees par 1' intermediate des 
objets 1 ogi n et motDePasse, l'application affiche les valeurs saisies dans une simple fenetre 
de sortie. 

6. Inserez les commandes trace ( ) dans le gestionnaire d'evenement approprie de facon 
a afficher les informations saisies lorsque l'utilisateur clique sur l'objet OK. 

Exercice 3.2 

Dans le jeu de bulles presente en exemple dans ce chapitre, le texte situe sur le curseur 
n'est pas le meme si l'utilisateur clique ou non dessus. Le texte « Jouer » apparait lorsque 
l'utilisateur clique sur le curseur. Dans tous les autres cas, le texte « Cliquer » est affiche 
sur le curseur. 



Extension web 

Vous trouverez dans le repertoire Exercices/SupportPourRealiserLesExercices/Chapitre3 
l'application telle que nous souhaitons la voir fonctionner (Exercice3_2.swf) une fois realisee. 

1. Reprenez l'exemple DeplaceCurseur etudie en section « Les techniques de program- 
mation incontournables - Le curseur se deplace horizontalement » et rechercher 
l'objet btnJouer. 

2. Quels sont les evenements a prendre en compte pour modifier le texte du curseur ? 

3. Pour ces evenements, creez ou modifiez les gestionnaires appropries de facon a 
remplacer le texte « Cliquer » par le message « Jouer » lorsque l'utilisateur clique sur 
le curseur. 



Communiquer ou interagir 

Chapitre 3 



Apprendre a gerer les evenements lies a la sourls et comprendre la 
notion d 'incrementation 

Exercice 3.3 

L'objectif est de deplacer un objet en cliquant sur des fleches qui donnent la direction du 
deplacement. L' application se presente sous la forme suivante (voir figure 3-18) : 

Figure 3-18 

La bulle se deplace 
dans la direction 
indiquee par 
la fleche cliquee. 




Les 8 fleches determinent chacune une direction. Lorsque l'utilisateur clique sur l'une 
d'entre elles, la bulle se deplace de 1 pixel dans la direction designee par la fleche. 



Extension web 

Pour vous faci liter la tache, les symboles proposes dans cet exercice sont definis dans le fichier 
Exercice3_3.fl a situe dans le repertoire Exercices/SupportPourRealiserLesExercices/ 
Chapitre3. Dans ce meme repertoire, vous pouvez accedera I'application telle que nous souhaitons la 
voirfonctionner(Exercice3_3.swf) une fois realisee. 



Pour realiser cette application, vous devez suivre les etapes suivantes : 

C reer et placer les objets 

1. Creez graphiquement une bulle et une fleche verticale. La bulle est un symbole de 
type Clip nomme Bui 1 eCl p et la fleche est egalement un symbole de type CI i p nomme 
Fl echeCl p. 

2. Les 8 fleches placees sur la scene sont des objets crees a partir du symbole Fl echeCl p. 
A l'aide de l'operateur new, creez et nommez chacune d'elle respectivement FlecheN, 
FlecheS, FlecheW, FlecheE, FlecheNE, FlecheNW, FlecheSE et FlecheSW. 

3. A 1' aide des proprietes x, y et rotati on, placer et orienter chacune des fleches de facon 
a obtenir les 8 fleches telles que celles presentees sur la figure 3-18. 



Remarque 

Chaque fleche est positionnee a mi-hauteur de la fenetre, avec un ecart de 10% de la largeur de la 
fenetre, a partir du bord droit de la scene. Chaque fleche forme un angle de 45° avec la suivante. 

Description des actions 

Lorsque l'utihsateur clique sur une fleche, la bulle se deplace de 1 pixel. Plus precisement : 

• La fleche Fl echeNE deplace la bulle de 1 pixel vers le haut et vers la droite de l'ecran. 

• La fleche Fl echeSE deplace la bulle de 1 pixel vers le bas et vers la droite de l'ecran. 

• La fleche Fl echeNW deplace la bulle de 1 pixel vers le haut et vers la gauche de l'ecran. 

• La fleche Fl echeSW deplace la bulle de 1 pixel vers le bas et vers la gauche de l'ecran. 
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• La fleche Fl echeN deplace la bulle de 1 pixel vers le haut de l'ecran. 

• La fleche Fl echeS deplace la bulle de 1 pixel vers le bas de l'ecran. 

• La fleche Fl echeW deplace la bulle de 1 pixel vers la gauche de l'ecran. 

• La fleche Fl echeE deplace la bulle de 1 pixel vers la droite de l'ecran. 

4. Compte tenu des differents deplacements proposes, ecrivez les gestionnaires 
d'evenements pour chacune des Heches en prenant soin d'incrementer de facon 
appropriee les proprietes x et/ou y de la bulle. 

Comprendre la gestion des evenements associes au temps 
Exercice 3.4 

L'objectif est de creer une application composee de clips dont l'animation est controlee 
par des boutons Lecture, Pause et Stop. L application se presente sous la forme suivante 
(voir figure 3-19) : 

Figure 3-19 

L'agneau etl'oiseau 
se deplacent si Vuti- 
lisateur clique sur le 
bouton Lecture. 



Extension web 

Pour vous faciliter la tache, les symboles proposes dans cet exercice sont definis dans le fichier 
Exercice3_4.fla situe dans le repertoire Exercices/SupportPourReal iserLesExercices/ 
Chapitre3. Dans ce meme repertoire, vous pouvez acceder a I'application telle que nous souhaitons la 
voirfonctionner(Exercice3_4.swf) une fois realisee. 



Cahierdes charges 

Lorsque l'animation est lancee, seul le bouton Lecture est visible. Ni les clips animes ni 
les autres boutons ne sont presents sur la scene. 

Quand l'utilisateur clique sur le bouton Lecture : 

• Les clips animes sont lances et traversent la scene de part en part. Un des deux clips 
avance plus vite que 1' autre. 

• Le bouton Pause remplace le bouton Lecture. 

• Le bouton Stop est place a cote du bouton Pause. 
Quand l'utilisateur clique sur le bouton Pause : 

• Les clips animes sont toujours animes mais ne se deplacent plus a travers la scene. 

• Le bouton Lecture remplace le bouton Pause afin de pouvoir relancer l'animation. 
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Quand l'utilisateur clique sur le bouton Stop : 

• Les clips animes ne sont plus animes et ne se deplacent plus a travers la scene. 

• Le bouton Lecture remplace le bouton Pause afin de pouvoir relancer l'animation. 

C reer et placer les objets 

Les symboles AgneauCl p, Oi seauCl p, StopBtn et LectureBtn ont ete crees au cours des exem- 
ples et des exercices du chapitre precedent. Seul le bouton Pause reste a creer, nommez-le 
PauseBtn. 

1. Creez les occurrences des symboles a l'aide de l'operateur new et nommer les respec- 
tivement : agneau, piaf, stopper, 1 i re et f ai reLlnePause. 

2. Placez les clips animes en dehors de la scene, 1' agneau a mi-hauteur de la scene et 
l'oiseau legerement au-dessus de l'agneau. Pour cela, vous devez utiliser les proprie- 
tes height, width, x et y des deux objets. Vous pouvez egalement utiliser une variable 
ecart pour augmenter ou diminuer l'ecart entre les deux clips. 

3. Placez les boutons de la facon suivante : 

- Le bouton 1 i re se trouve aux deux tiers de la largeur de la fenetre, avec un ecart de 
5 % de la scene par rapport au bas de la scene. 

- Le bouton f ai reUnePause se superpose au bouton 1 i re. II n'est pas visible quand le 
bouton Lecture Test. 



Remarque 

Pourrendre un objet invisible, vous devez mettre a f ai se la propriete visible de I'objet. A I'inverse, si la 
propriete vauttrue I'objet est visible. 



- Un ecart de 5 % de la scene separe le bouton stopper du bouton 1 ire. Le bouton 
stopper n'est pas visible lorsque le bouton Lecture Test. 

Description des actions 

4. Le deplacement des clips 

En utilisant la notion decrementation, ecrire les gestionnaires d'evenements 
Event . ENTER_FRAME pour les objets piaf et agneau, de maniere a ce qu'ils se deplacent 
horizontalement, de gauche a droite. L'oiseau allant plus vite que l'agneau, utiliser 
deux pas d' incrementation distincts. 

5. La gestion des boutons 

Associez les boutons 1 ire, faireUnePause et stopper a l'evenement MouseEvent.MOUSE_UP. 
Les actions realisees par le bouton 1 i re sont les suivantes : 

- Rendre invisible le bouton 1 i re. 

- Rendre visible les boutons fai reUnePause et stopper. 

- Lancer l'animation des clips piaf et agneau avec la methode pi ay( ). 

-Lancer le deplacement des clips piaf et agneau (voir paragraphe precedent) en 
initialisant les pas d' incrementation a deux valeurs distinctes. 
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Les actions realisees par le bouton fai reUnePause sont les suivantes : 

- Rendre visible le bouton 1 i re. 

- Rendre invisible le bouton fai reUnePause. 

- Arreter le deplacement des clips piaf et agneau. Pour cela, vous initialiserez les pas 
d' incrementation des deux clips a 0. 

- Lancer le deplacement des clips pi af et agneau (voir paragraphe precedent). 
Les actions realisees par le bouton stopper sont les suivantes : 

- Rendre visible le bouton 1 i re. 

- Rendre invisible le bouton fai reUnePause. 

- Arreter le deplacement des clips piaf et agneau. Pour cela, vous initialiserez les pas 
d' incrementation des deux clips a 0. 

- Arreter l'animation des clips pi af et agneau en utilisant la methode stop( ). 
ds= Pour en savoir plus 

Les methodes play( ) et stop( ) sont etudiees au chapitre 2, « Les symboles », section « Les methodes 
associees au clip ». 

Le projet mini site 

Les notions abordees dans ce chapitre ne sont pas sufhsantes pour commencer a develop- 
per l'application dans son integralite. Neanmoins, comme nous l'avons precise au chapi- 
tre d'introductif de cet ouvrage, un programme est fait de briques qui, assemblies les 
unes aux autres, font de lui une application a part entiere. 

Nous allons aborder ici la mise en place des gestionnaires d'evenements MouseEvent . M0USE_ 
OVER, MouseEvent. MOUSEJDUT et MouseEvent. MOUSEJJP sur les differents elements interactifs 
du site. Nous n'aborderons le deplacement des rubriques et des pages qu'au cours du 
chapitre 4 « Faire des choix ». 



Extension web 

Pour vous faciliter la tache, vous trouverez le fichier ProjetChapitre3.fl a, dans le repertoire Projet\ 
SupportPourRealiserLeProjet\Chapitre3 comme support pour vous aider a realiser cette partie du 
projet. Dans ce meme repertoire, vous pouvez accedera l'application a realiser telle que nous souhaitons 
la voir fonctionner (ProjetChapitre3.swf) une fois terminee. 

La page d'accueil 

La page Accueil est la page qui s'affiche en premier dans le navigate ur, lorsque l'inter- 
naute a tape l'URL du site dans la barre de navigation. 

La page Accueil est uniquement constitute des quatre zones colorees indiquant les rubriques 
Photos, Animes, Videos et Infos. Le titre du site est place en haut a gauche de la page. 

Examinez le code propose au sein du fichier ProjetChapitre3.fla et modifiez les proprietes 
vi si bl e des objets ne devant pas apparaitre sur la page Accueil - pages et mini rubriques. 
Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 



Communiquer ou interagir | 
Chapitre 3 | 

Le survol de la souris 

Le mini site est compose de plusieurs elements interactifs qui sont : 

• les rabriques ; 

• les mini rubriques ; 

• le titre. 

Pour montrer a l'internaute que ces elements sont reactifs au clic de la souris, l'usage 
veut que ces elements changent d'aspect au survol de la souris. Les elements voient leur 
opacite diminuer lorsqu'ils sont survoles. Le curseur de la souris se transforme egalement 
pour passer d'une simple fleche a la forme d'une main. 

MOUSE_OVER 

Le changement d'aspect d'un element interactif est toujours le meme quelque soit 
T element (rubrique, titre. . .). Ainsi, par exemple, le gestionnaire du survol de la rubrique 
Photos pourrait s'ecrire de la facon suivante : 

rubriquePhotos. add Event Li stener(MouseEvent.MOUSE_OVER, surOverPhotos) ; 
function surOverPhotos(e:MouseEvent) :void { 

//La rubrique devient plus transparente 

rubriquePhotos. alpha = 0.6; 

//Le curseur prend la forme d'une main 

rubriquePhotos. buttonMode = true; 

} 

Pour realiser le changement d'aspect de tous les elements interactifs du site, une 
premiere solution consisterait a copier/coller ces quelques lignes et a modifier a chaque 
fois le nom de l'objet sur lequel s'applique l'evenement, ainsi que le nom de la fonction 
qui traite Taction. Cette solution est laborieuse et denuee d'interet. 

La seconde solution peut paraitre plus complexe aux novices, mais a l'avantage de 
simplifier grandement le code. La technique consiste a utiliser un outil propose par les 
concepteurs du langage qui permet de recuperer le nom de l'objet qui recoit l'evenement. 

La fonction ci-apres utilise cet outil de la facon suivante : 

function surOver(e:MouseEvent) :void { 
var cible:Sprite = e.currentTarget as Sprite; 
cible. alpha = 0.6; 
cible. buttonMode = true; 

} 

L'evenement percu par l'objet a l'aide de la fonction sur0ver( ) est transmis a Taction, par 
T intermediate du parametre e, de type MouseEvent. Pour connaitre le nom exact de 
l'objet qui vient de recevoir l'evenement M0USE_0VER, il suffit de rechercher la propriete 
currentTarget (en francais cible courante) associe a cet evenement. Cette recherche est 
realisee grace a T instruction : 

var cible:Sprite = e.currentTarget as Sprite; 

ds= Pour en savoir plus 

Les notions de fonction et de parametre sont etudiees plus precisement au chapitre 7, « Les fonctions ». 
Les objets etles proprietes sonttraites au chapitre 8, « Les classes etles objets ». 
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L'objet retrouve par 1' intermediate de la propriete currentTarget est alors traite comme 
un Spri te et memorise dans la variable ci bl e. 

Une fois memorise, il est possible de modifier les proprietes de l'objet ayant recu 
l'evenement arm de transformer son apparence et changer la forme du curseur de la 
souris. Ces transformations sont realisees en modifiant directement les proprietes de 
l'objet ci bl e comme suit : 

cible. alpha = 0.6; 
| cible. buttonMode = true; 

Grace a cette technique, vous pouvez ajouter la meme action sur0ver( ) a tous les objets 
interesses par le traitement de l'evenement M0USE_0VER, en ecrivant : 

rubriquePhotos .add Event Li stenertMouseEvent .MOUSE_0VER, surOver) ; 
rubriqueAnimes .add Event Li stenertMouseEvent .MOUSE_0VER, surOver) ; 
rubriqueVideos .add Event Li stenertMouseEvent .MOUSE_0VER, surOver) ; 

Ainsi, pour faire en sorte que tous les elements interactifs du site reagissent au survol de 
la souris, examinez le code propose au sein du fichier ProjetChapitre3.fla et retrouvez 
tous les objets sensibles a l'evenement MouseEvent.MOUSEJVER afin de leur ajouter le 
gestionnaire decrit precedemment. 

Verifiez le bon fonctionnement du code en 1' executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 

MOUSE_OUT 

Lorsque le curseur de la souris n'est plus sur l'objet percevant l'evenement MOUSEJVER, 
l'apparence de l'objet doit revenir a l'etat precedent. L'evenement a detecter est Mouse- 
Even. MOUSEJUT. 

En vous inspirant du gestionnaire MOUSEJVER et de son action surOverO, ecrivez le 
gestionnaire M0USE_0UT et son action surOutO de facon a rendre son opacite a l'objet 
percevant l'evenement. Ajoutez ensuite ce gestionnaire a tous les objets concernes. 

Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 

Le die de souris 

Le clic de souris est percu par un objet lorsqu'on lui ajoute l'ecouteur MouseEvent.MOUSEJJP 
a l'aide de la fonction addEventListenert ). 

A reception de l'evenement, une action est menee soit pour afficher une nouvelle page, 
soit pour effacer une mini rubrique selon l'objet clique. L action est parfois differente, 
parfois semblable meme si l'objet percevant l'evenement differe. Examinons les differents 
scenarios possibles. 

Sur une rubrique 

Lorsque l'utilisateur clique sur une rubrique, toutes les rubriques disparaissent pour lais- 
ser apparaitre la page correspondant a la rubrique cliquee. Les mini rubriques apparaissent 
egalement, sauf celle correspondant a la rubrique cliquee. 
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Pour chaque rubrique (rubriquePhotos, rubriqueAnimes, rubriqueVideos et rubriquelnfos), 
ecrivez les gestionnaires M0USE_UP et les actions associees cl icSurPhotos( ), cl 1cSurAn1raes(), 
clicSurVideos( ) et cl icSurInfos(), respectivement, sachant que chaque action rend visible : 

• la page concernant sa rubrique ; 

• les mini rubriques ; 
et rend invisible : 

• toutes les rubriques ; 

• la mini rubrique associee a la page affichee. 

La visibilite ou non d'un objet est modifiee en mettant a true ou f al se la propriete vi si bl e 
de 1' objet concerne. 

Verifiez le bon fonctionnement du code en 1' executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 

Sur une mini rubrique 

Lorsque l'utilisateur clique sur une mini rubrique, la page courante disparait pour laisser 
apparaitre la page correspondant a la mini rubrique cliquee. Les rubriques sont invisibles. 
Les mini rubriques apparaissent egalement, sauf celle correspondant a la rubrique cliquee. 

En realite, Faction a mener lorsque 1'utihsateur clique sur une mini rubrique est identique a 
celle menee lorsque Ton clique sur une rubrique. 

Pour obtenir le bon affichage, vous devez done faire en sorte que les actions cl i cSurPhotos ( ), 
clicSurAnimesO, cl icSurVideos( ) et cl i cSurInfos() soient egalement realisees lorsque 
Ton clique sur les objets mini Photos, miniAnimes, mini Videos et mini Infos respectivement. 

Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 

Sur le titre 

Lorsque l'utilisateur clique sur le titre, la page courante disparait ainsi que les mini 
rubriques, les rubriques rubriquePhotos, rubriqueAnimes, rubriqueVideos et rubriquelnfos 
apparaissent. 

Ecrivez Taction cl i cSurTi tret ) qui realise l'ensemble de ces actions et ajouter l'ecouteur 
d'evenement MouseEvent.MOUSEJJP a l'instance titre. 

Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 
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Avec les gestionnaires d'evenements, il est possible de realiser des comportements diffe- 
rencies en fonction des actions (choisies) de l'utilisateur. Les gestionnaires d'evenements 
permettent done, dans une certaine mesure, de concevoir des programmes qui ne sont pas 
executes de facon sequentielle (de la premiere a la derniere ligne). 

Les gestionnaires d'evenements ne sont pas les seuls outils de programmation pour reali- 
ser des choix. II existe d'autres structures de programmation qui permettent de rompre 
l'ordre d'execution d'une application. II s'agit des structures conditionnelles qui permet- 
tent d'ignorer une ou plusieurs instructions en fonction du resultat d'un test precis. Le 
programme s'execute alors, en tenant compte de contraintes imposees par le programmeur 
et non pas par l'utilisateur. 

Dans ce chapitre, nous abordons la notion de choix ou de test, en reprenant l'algorithme 
de l'oeuf a la coque, pour le transformer en un algorithme de l'ceuf a la coque ou poche 
(voir section « L'algorithme de l'oeuf a la coque ou poche »). 

Ensuite, a la section « L instruction if-else », nous etudierons la structure if -else proposee 
par le langage ActionScript, qui permet de realiser des choix. 

Au cours de la section « Les techniques de programmation incontournables », nous 
expliquerons comment compter des valeurs et nous apprendrons egalement a utiliser les 
variables « drapeaux » a l'interieur des structures de test. 

Enfin, a la section « L'instruction switch ou comment faire des choix multiples », nous 
examinerons le concept de choix multiples par 1' intermediate de la structure switch. 

L'algorithme de l'oeuf a la coque ou poche 

Pour mieux comprendre la notion de choix, nous allons reprendre l'algorithme de l'ceuf 
a la coque pour le transformer en algorithme de l'oeuf a la coque ou poche. L'enonce ainsi 
transforme nous oblige a modifier la liste des objets manipules, ainsi que celle des 
operations a realiser. 
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Definition des objets manipules 

Pour obtenir un oeuf poche au lieu d'un oeuf a la coque, nous devons aj outer a notre liste 
deux nouveaux ingredients, le sel et le vinaigre, ainsi qu'un nouvel objet, une assiette. 

casserol e 

plaque electrique 

eau 

(EUf 

coquetier 
minuteur 
electricite 
tabl e 
cui 1 1 ere 
sel 

assiette 
vinaigre 

Liste des operations 

De la meme facon, nous devons modifier la liste des operations, afin de prendre en 
compte les nouvelles donnees : 

Verser l'eau dans la casserole, le sel, le vinaigre dans l'eau, faire bouillir l'eau. 
Prendre la casserole, l'ceuf, de l'eau, le minuteur, le coquetier, le sel. le vinaigre, 
*la cuillere. 

Allumer ou eteindre la plaque electrique. 
Attendre que le minuteur sonne. 
Mettre le minuteur sur 3 minutes. 
Casser 1 '<Euf . 

Poser la casserole sur la plaque, le coquetier, 1 'assiette, le minuteur sur la table, 
*l'(Euf dans la casserole, 1 '(Euf dans le coquetier, 1 '<Euf dans 1 'assiette. 

Ordonner la liste des operations 

Ainsi modifiee, la liste des operations doit etre reordonnee afin de rechercher le moment 
le mieux adapte pour aj outer les nouvelles operations. 

En choisissant de prendre le sel et la petite cuillere en meme temps que l'eau et la casse- 
role, nous placons les nouvelles instructions prendre... entre les instructions 2 et 3 defi- 
nies a la section « Ordonner la liste des operations » du chapitre introductif, « A la source 
d'un programme ». 

En decidant de casser l'oeuf au lieu de le placer directement dans l'eau bouillante, nous 
modifions les instructions pi acer. . . et poser. . . du meme exemple. 

Nous obtenons la liste des operations suivantes : 

1. Prendre une casserole. 

2. Verser l'eau du robinet dans la casserole. 

3. Poser la casserole sur la plaque electrique. 

4. Prendre le sel et le verser dans l'eau. 

5. Prendre le vinaigre et le verser dans l'eau. 

6. Allumer la plaque electrique. 

7. Faire bouillir 1 'eau. 

8. Prendre 1 'teuf . 
9 Casser 1 '<Buf . 
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10. Placer 1 'ceuf dans la casserole. 

11. Prendre le minuteur. 

12. Mettre le minuteur sur 3 minutes. 

13. Prendre un coquetier. 

14. Prendre une assiette. 

15. Poser le coquetier sur la table. 

16. Poser 1 'assiette sur la table. 

17. Attendre que le minuteur sonne. 

18. Eteindre la plaque electrique. 

19. Prendre une cuillere. 

20. Retirer l'suf de la casserole a 1 'aide de la cuillere. 

21. Poser 1 ' oeuf dans le coquetier. 

22. Poser 1 'oeuf dans 1 'assiette. 

Ecrite ainsi, cette marche a suivre nous permet d'obtenir un oeuf poche puisque l'ceuf est 
obligatoirement casse lors de 1' instruction ©. 

Dans l'exemple precedent, les instructions 13 et 14, 15 et 16, 21 et 22 sont realisees quel 
que soit le choix de la recette, alors qu'il n'est pas necessaire de prendre le coquetier pour 
la recette de l'ceuf poche et inversement. Pour eviter de realiser des actions inutiles, nous 
devons introduire un test, en posant une condition devant chaque instruction specifique 
aux deux modes de cuisson, c'est-a-dire : 

1. Prendre une casserole. 

2. Verser l'eau du robinet dans la casserole. 

3. Poser la casserole sur la plaque electrique. 

4. Si (oeuf poche) Prendre le sel et le verser dans l'eau. 

5. Si (oeuf poche) Prendre le vinaigre et le verser dans l'eau. 

6. Allumer la plaque electrique. 

7. Faire bouillir 1 'eau. 

8. Prendre 1 'oeuf . 

9. Si (oeuf poche) Casser 1 'oeuf . 

10. Placer 1 'oeuf dans la casserole. 

11. Prendre le minuteur. 

12. Mettre le minuteur sur 3 minutes. 

13. Si (oeuf coque) Prendre un coquetier. 

14. Si (oeuf poche) Prendre une assiette. 

15. Si (oeuf coque) Poser le coquetier sur la table. 

16. Si (oeuf poche) Poser l'assiette sur la table. 

17. Attendre que le minuteur sonne. 

18. Eteindre la plaque electrique. 

19. Prendre une cuillere. 

20. Retirer 1 'oeuf de la casserole a 1 'aide de la cuillere. 

21. Si (oeuf coque) Poser 1 '(Euf dans le coquetier. 
22 Si (oeuf poche) Poser 1 'oeuf dans l'assiette. 

Dans cette situation, nous obtenons un ceuf a la coque ou poche, selon notre choix. 
Observons cependant que le test Si (ceuf poche) est identique pour les instructions 4, 5, 9, 
14, 16 et 22. Pour cette raison, et sachant que chaque test represente un cout en termes de 
temps d'execution, il est conseille de regrouper au meme endroit toutes les instructions 
relatives a un meme test. 

C'est pourquoi nous distinguons 6 blocs d' instructions distincts : 

1. les instructions soumises a la condition de l'oeuf poche (I I Preparer un ceuf poche et V 
Obtenir un oeuf poche) ; 
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2. les instructions soumises a la condition de l'ceuf a la coque (1 1 1 Preparer un suf a 1 a 
coque etVI Obtenir un <euf a la coque) ; 

3. les instructions realisables quelle que soit la condition (I Preparer les ingredients et 
IV Faire cuire). 

Dans ce cas, la nouvelle marche a suivre s'ecrit : 



Instructions 


Bloc constructions 




1. Prendre une casserole. 

2. Verser l'eau du robinet dans la casserole. 

3. Poser la casserole sur la plaque electrique. 

4. Allumer la plaque electrique. 

6. Faire bouillir 1 'eau. 

7 . Prendre 1 '<euf . 


1 Preparer les ingredients 


Si ((Euf poche) 






1. Prendre le sel et le verser dans l'eau. 

2. Prendre le vinaigre et le verser dans l'eau. 

3. Prendre une assiette. 

4. Poser l'assiette sur la table. 

5. Casser 1 'euf . 


II Preparer un oauf poche 


Sinon 




1. Prendre un coquetier. 

2. Poser le coquetier sur la table. 


III Preparer un oauf a la coque 




8. Placer 1'euf dans la casserole. 

9. Prendre le minuteur. 

10. Mettre le minuteur sur 3 minutes. 

11. Attendre que le minuteur sonne. 

12. Eteindre la plaque electrique. 

13. Prendre une cuillere. 

14. Retirer 1 'oeuf de la casserole a l'aide 
de la cuillere. 


IV Faire cuire 


Si ((Euf poche) 




| 1. Poser 1 'oeuf dans l'assiette. 


V Obtenir un oauf poche 


Sinon 




1. Poser 1 '(Euf dans le coquetier. 


VI Obtenir un oauf a la coque 



La realisation du bloc I Preparer les ingredients permet de mettre en place tous les 
objets necessaires a la realisation de la recette oeuf poche ou ceuf a la coque. Ensuite, en 
executant le test Si (oeuf poche), deux solutions sont possibles : 

1. La proposition (suf poche) est vraie, et alors les instructions 1 a 5 du bloc 1 1 Preparer 
un Euf poche sont executees. 

2. La proposition (auf poche) est fausse et les instructions qui suivent ne sont pas executees. 
Seules les instructions placees dans le bloc sinon (III Preparer un auf a la coque) 
sont executees. 
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Le mode de cuisson est identique quelle que soit la recette choisie, le bloc IV Fan re cui re 
est realise en dehors de toute condition. Le second test Si (oeuf poche) permet de prendre 
le meilleur support pour deposer l'ceuf une fois cuit. 



Remarque 

Un bloc constructions peutetre compose d'une seule ou de plusieurs instructions. 



Pour programmer un choix, nous avons place un test (une condition) devant les instruc- 
tions concernees. En programmation, il en est de meme. Le langage ActionScript 3.0 
propose plusieurs instructions de test, a savoir la structure i f-el se, que nous etudions ci- 
apres ainsi que la structure switch que nous analysons a la section « L' instruction switch 
ou comment faire des choix multiples », un peu plus loin dans ce chapitre. 

L'instruction if-else 

L'instruction if-else se traduit en francais par les termes si-sinon. Elle permet de 
programmer un choix, en placant derriere le terme i f une condition, comme nous avons 
place une condition derriere le terme si de l'algorithme de l'ceuf a la coque ou poche. 

L'instruction if-else se construit de la facon suivante : 

1. en suivant une syntaxe, ou forme precise du langage ActionScript 3.0 (voir section 
« Syntaxe d'if-else ») ; 

2. en precisant la condition a tester (voir la section « Comment ecrire une condition »). 

Nous presentons a la fin de cette section, differents exemples utilisant la structure de test 
if-el se a partir de l'exemple du jeu de bulles developpe au chapitre precedent. 

Syntaxe d'if-else 

L'ecriture de l'instruction if-el se obeit aux regies de syntaxe suivantes : 
if (condition) //si la condition est vraie 



{ //faire 

plusieurs instructions; 

} //fait 

else //sinon (la condition ci-dessus est fausse) 

{ //faire 

plusieurs instructions; 
} //fait 



1 . Si la condition situee apres le mot-cle i f et placee obligatoirement entre parentheses 
est vraie, alors les instructions placees dans le bloc defini par les accolades ouvrante 
et fermante immediatement apres sont executees. 

2. Si la condition est fausse, alors les instructions definies dans le bloc situe apres le 
mot-cle el se sont executees. 

De cette facon, un seul des deux blocs peut etre execute a la fois, selon que la condition 
est verifiee ou non. 



Remarque 

La ligne d'instruction if (condition )ou el se ne se termine jamais par un point-virgule (;). 
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Les accolades fermante et ouvrante ({ et }) definissent un bloc d' instructions. Cela 
permet de regrouper ensemble toutes les instructions relatives a un meme test (comme 
nous avons pu le faire en creant les blocs 1 1 Preparer un <Euf pocheetlll Preparer un oeuf 
a 1 a coque, lors de la mise en place de ralgorithme de l'oeuf a la coque ou poche). 

L'ecriture du bloc el se n'est pas obligatoire. II est possible de n'ecrire qu'un bloc i f sans 
programmer d'instruction dans le cas oil la condition n'est pas verifiee. En d'autres 
termes, il peut y avoir des i f sans el se. 

S'il existe un bloc el se, celui-ci est obligatoirement « accroche » a un i f . Autrement dit, 
il ne peut y avoir d'el se sans i f . 

Le langage ActionScript propose une syntaxe simpliriee lorsqu'il n'y a qu'une seule 
instruction a executer dans l'un des deux blocs if ou else. Dans ce cas, les accolades 
ouvrante et fermante ne sont pas obligatoires : 

if (condition) une seule instruction; 
else une seule instruction; 

ou : 

if (condition) 

{ //faire 

plusieurs instructions; 
} //fait 
else une seule instruction; 

ou encore : 

if (condition) une seule instruction; 

el se 

{ //faire 
plusieurs instructions; 

} //fait 

Une fois connue la syntaxe generale de la structure if -else, nous devons ecrire la 
condition (placee entre parentheses, juste apres if) permettant a l'ordinateur 
d'executer le test. 

Comment ecrire une condition ? 

L'ecriture d'une condition en ActionScript 3.0 fait appel aux notions d'operateurs rela- 
tionnels et conditionnels. 

Les operateurs relationnels 

Une condition est formee par l'ecriture de la comparaison de deux expressions, une 
expression pouvant etre une valeur numerique ou une expression arithmetique. Pour 
comparer deux expressions, le langage ActionScript 3.0 dispose de 6 symboles repre- 
sentant les operateurs relationnels traditionnels en mathematiques. 



Tableau 4-1 Liste des operateurs de comparaison en ActionScript 



Operateur 


Signification pour des valeurs numeriques 


Signification pour des valeurs de type caractere 




egal 


identique 


< 


inferieur 


plus petit dans I'ordre alphabetique 


<= 


strictement inferieur ou egal 


plus petit ou identique dans I'ordre alphabetique 
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Tableau 4-1 Liste des operateurs de comparaison en ActionScript 



Operateur 


Signification pour des valeurs numeriques 


Signification pour des valeurs de type caractere 


> 


superieur 


plus grand dans I'ordre alphabetique 


>= 


strictement superieur ou egal 


plus grand ou identique dans I'ordre alphabetique 




different 


different 



Un operateur relationnel permet de comparer deux expressions de meme type. La compa- 
raison d'une valeur numerique avec une suite de caracteres n'est valide que si la suite de 
caracteres est composee de caracteres numeriques. 

Lorsqu'il s'agit de comparer deux expressions composees d'operateurs arithmetiques 
(+, -, *, /, %), les operateurs relationnels sont moins prioritaires par rapport aux operateurs 
arithmetiques. De cette facon, les expressions mathematiques sont d'abord calculees 
avant d'etre comparees. 

Notons que pour tester l'egalite entre deux expressions, nous devons utiliser le 
symbole == et non pas un simple =. En effet, en ActionScript 3.0, le signe = n'est pas un 
signe d'egalite au sens de la comparaison, mais le signe de 1' affectation, qui permet de 
placer une valeur dans une variable. 



Question 

En in itia lisa nt les variables a, b, mot, test et val Num de la fagon suivante : 
var a:Number = 3, b:Number = 5; 

var motiString = "ascete", test:String = "ascenceur"; 
var valNum iString = "2.5"; 

examinez si les conditions ci-dessous sontvraies ou fausses : 

. (a != b) 

• (a + 2 == b) 

. (a + 8 < 2 * b) 

• (a > valNum) 

• (test <= mot) 

• (mot == "wagon") 

Reponse 

• La condition (a != b) est vraie car 3 est different de 5. 

• La condition (a + 2 == b) estvraie car 3 + 2 vaut 5. 

• La condition (a + 8 < 2 * b) estfausse car 3 + 8 est plus grand que 2 * 5. 

• La condition (a > val Num) est vraie car meme si les variables a et val Num ne sont pas de meme 
type, le lecteur Flash peut les comparer. E lies contiennent toutes deux des valeurs numeriques. 3 est 
bien superieur a 2.5. 

• La condition (test <= mot) estvraie carle mot "ascenceur" est place avant "ascete" dans 
I'ordre alphabetique. 

• La condition (mot == "wagon") estfausse car le mot "ascete" est different de la chaine de carac- 
teres "wagon". 
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Extension web 

Vous trouverez cetexemple dans le fichier QuestionReponseTest.fi a sous le repertoire Exemples/ 
Chapitre4. 



Les operateurs logiques 

Les operateurs logiques sont utilises pour associer plusieurs conditions simples et, de 
cette facon, creer des conditions multiples en un seul test. II existe trois grands operateurs 
logiques, symbolises par les caracteres suivants : 



Tableau 4-2 Liste des operateurs logiques en ActionScript 



Operateur 


Signification 


! 

&& 

II 


NON logique 
ET logique 
OU logique 





Question 

En in itia lisant les variables x, y, z et r de la fagon suivante : 



var x:Number = 3, y:Number = 5, z:Number = 2, r:Number = 6; 
examinez si les conditions suivantes sontvraies ou fausses : 

• (x < y) && (z < r) 

• (x > y) | | (z < r) 

• Hz < r) 

Reponse 

• Sachant que la condition (x < y) && (z < r) est vraie si les deux expressions (x < y) et 
(z < r) sont toutes les deux vraies et devient fausse si I'une des deux expressions est fausse, 
I'expression donnee en exemple estvraie. En effet, (3 < 5) est vraie et (2 < 6) estvraie. 

• Sachant que la condition (x > y) 1 1 (z < r) est vraie si I'une des expressions (x > y) ou 
(z < r) est vraie et devient fausse si les deux expressions sont fausses, I'expression donnee en 
exemple estvraie car (3 > 5) estfausse, mais (2 < 6 ) est vraie. 

• Sachant que la condition ! (z < r) est vraie si I'expression (z < r) est fausse et devient fausse si 
I'expression estvraie, alors I'expression donnee en exemple estfausse car (2 < 6) estvraie. 



Exemple, le jeu de bulles 

Pour mettre en pratique les notions theoriques abordees aux deux sections precedentes, 
nous allons reprendre le jeu de bulles commence au chapitre precedent (voir chapitre 3, 
« Communiquer ou interagir », section « Les techniques de programmation incontour- 
nables ») avec pour objectif d'ameliorer son fonctionnement en modifiant par exemple 
le parcours de la bulle lorsque celle-ci sort de l'ecran ou lorsqu'elle est touchee par le 
curseur. 
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La bulle remonte quand elle sort de la scene 

Lorsque la bulle sort de la scene, le jeu n'a plus grand interet... Nous ne pouvons plus 
toucher la bulle avec le curseur. Pour la voir descendre a nouveau sous nos yeux, nous 
devons la replacer en haut de la scene des qu'elle sort totalement de la fenetre. 



Extension web 

Vous trouverez cet exemple dans le fichier BulleSortieEcran.fla, sous le repertoire Exemples/ 
Chapitre4. 



Pour savoir si la bulle se trouve sur la scene ou en dehors, nous devons tester si la position 
de la bulle selon l'axe des Y depasse la hauteur de la fenetre. Ce test s'ecrit en Action- 
Script : 

if (bSavon.y > hauteur + bSavon. height/2) { 

//Replacer la bulle au-dessus de la scene n'importe ou 
//sur la largeur de la scene 

La condition placee entre parentheses de la structure i f precise que les actions sont reali- 
sees seulement si la position en y de bSavon depasse la hauteur de la scene plus la moitie 
de la hauteur de la bulle. En effet, le point de reference du symbole Bui 1 eCl p est defini au 
centre de la bulle (voir figure 4-1-0). Lorsque ce point depasse la hauteur de la scene, la 
moitie superieure de la bulle reste encore visible. En ajoutant bSavon. height/2 a hauteur, 
la bulle sort totalement de la scene avant d'etre remontee en haut de la scene (voir 
figure 4-1-©). 



Pour replacer la bulle au-dessus de la scene, la technique consiste a modifier la coordon- 
nee en y de la bulle de facon a ce que celle-ci se trouve au-dessus et en dehors de la scene. 

Pour ce faire, nous proposons de placer l'objet bSavon a une hauteur qui corresponde a 
son diametre, soit -bSavon . hei ght (voir figure 4-1-©). L'instruction : 



Figure 4-1 




Positions d' une bulle 
sur I 'axe des Y 




bSavon.y = - bSavon. height; 
placee a l'interieur du bloc i f realise ce positionnement. 



150 



Apprendre a programmer en ActionScript 3 



Pour rendre le jeu plus attractif, la bulle doit apparaitre n'importe oil sur la largeur de la 
scene. Cette operation est realisee en calculant une valeur aleatoire comprise entre 0 et 
largeur grace a l'instruction : 

bSavon.x = Math . randomt ) * largeur; 

Math. random( ) est une fonction predefinie du langage ActionScript qui calcule une valeur 
aleatoire comprise entre 0 et 1. En multipliant cette valeur par 1 argeur, nous sommes assures 
que la position en x de l'objet bSavon est comprise entre 0 et 1 argeur (voir figure 4-1-0). 

Le deplacement repetitif de la bulle du haut vers le bas s'effectue a chaque emission de 
l'evenement Event . ENTER_FRAME. En effet, la coordonnee en y de la bulle est incrementee a 
l'interieur du gestionnaire Event . ENTER_FRAME. Le test doit done etre effectue a chaque fois 
que cette valeur est modifiee. 

Lensemble du bloc if, tel que nous l'avons construit, s'insere dans le gestionnaire 
Event. ENTER^FRAME comme suit : 

//Definir un gestionnaire d'evenement MouseEvent.MOUSE_DOWN pour le curseur 

btnJouer .addEvent Listener (MouseEvent .MOUS E_D0WN , 1 eCurseurSeDepl ace) ; 
function leCurseurSeDeplace(event:MouseEvent):void ( 
bSavon. addEvent Li stener( Event. ENTER_FRAME,seDepl ace) ; 

//Deplacement du curseur avec startDragO; 

} 

function seDeplace(e:Event) :void{ 
bSavon. y +=vitesse; 

//Si la bulle de savon sort de la scene 

if ( bSavon. y > hauteur + bSavon. height/2) { 

//Remonter la bulle et la placer au hasard sur l'axe des X 

bSavon. y = -bSavon. height ; 

bSavon.x = Math.random()*largeur; 

} 

} 

La bulle remonte quand elle rencontre le curseur 

Lorsque le joueur deplace le curseur et touche une bulle, celle-ci est de nouveau placee 
en haut de la scene. 

Les actions a realiser sont done identiques, mais le test qui permet de les realiser est 
different. En effet, il s'agit ici de detecter si les objets btnJouer et bSavon se rencontrent. 
Pour cela, nous devons utiliser une methode predefinie d' ActionScript 3.0 nommee 
hitTestPoint( ). 

La syntaxe d'utilisation de la methode hitTestPoint( ) est la suivante : 

if (objetA.hitTestPoint (objetB.x, objetB.y) == true ) { 
traceC L'objet A est entre en collision avec l'objet B"); 

) 

La methode hitTestPoint( ) examine si 1'objetA recouvre ou recoupe le point specifie par 
les parametres objetB.x et objetB.y. 



Remarque 

La methode hitTestPoint( )peut prendre un troisieme parametre de type booleen, qui indique si la veri- 
fication doit porter sur les pixels reels de l'objet (true) ou sur le cadre de delimitation (false). Par defaut, 
le booleen est place a false. 
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La realisation du test s'effectue en deux temps : 

• Tout d'abord, la methode hi tTestPoi nt( ) est executee afin de savoir si le premier objet 
recouvre le point indique en parametre. Si c'est le cas, la methode retourne en resultat 
la valeur true, sinon false. 

• La seconde partie du test consiste a verifier si le resultat retourne par la methode 
hitTestPoint( ) est egal a true ou non. S'il y a egalite, le bloc if est execute. Dans le 
cas contraire, c'est le bloc el se qui Test. 



Remarque 

Par facilite d'ecriture, un test d'egalite avec une valeur booleenne s'ecrit plus simplement : 

if (objetA. hitTestPoint(objetB.x, objetB.y)) 

Lorsque la condition est ecrite ainsi, la methode hi tTestPoi nt( ) est executee, et la structure 
if (objetA. hitTestPointtobjetB.x, objetB.y)) est traduite littera lement par if (true) ou 
if (fal se) selon la situation. Dans le premier cas, le bloc if est execute, alors que dans le second cas, 
le bloc el se est execute s'il existe. 



Dans notre exemple, le test s'ecrit en remplacant objetA et objetB par bSavon et btnJouer : 

if ( (bSavon. hitTestPointtbtnJouer.x, btnJouer. y)) { 

//Replacer la bulle au-dessus de la scene n'importe ou 

//sur la largeur de la scene 

} 

Les actions a realiser lorsque le curseur touche la bulle sont identiques a celles executees 
lorsque la bulle sort de l'ecran. Autrement dit, lorsque la bulle sort de la fenetre ou 
lorsqu'elle est touchee par le curseur, la bulle est replacee en haut de la scene. 

Ainsi, en associant les deux conditions bSavon.hitTestPoint(btnJouer.x, btnJouer. y) et 
(bSavon.y > hauteur + bSavon. height / 2) avec l'operateur logique ou (||), nous allons 
pouvoir realiser les memes actions, quelle que soit la situation. 

Le test complet permettant de deplacer la bulle quel que soit le cas s'ecrit done de la 
facon suivante : 

//Definir un gestionnaire d'evenement MouseEvent.MOUSE_DOWN pour le curseur 
btnJouer .addEvent Li stener(MouseEvent .M0USE_DOWN, 1 eCurseurSeDepl ace) ; 
function leCurseurSeDeplace(event:MouseEvent):void { 
bSavon. addEvent Li stener( Event. ENTER_FRAME,seDepl ace) ; 

//Depl acement du curseur avec startDragO; 

} 

function seDeplace(e:Event):void { 
bSavon.y +=vitesse; 

//Si la bulle de savon sort de la scene ou si el 1 e rencontre le curseur 
if ((bSavon.y > hauteur + bSavon. height/2) || (bSavon. hitTestPoint(btnJouer.x, 
**btnJouer.y) ) ) { 

//Remonter la bulle et la placer au hasard sur l'axe des X 
bSavon.y = -bSavon. height ; 
bSavon. x = Math.random()*largeur; 

} 

} 
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Deux erreurs a eviter 

Deux types d'erreur sont a eviter par le programmeur debutant. II s'agit des erreurs 
issues d'une mauvaise construction des blocs i f ou el se et d'un placement incorrect du 
point-virgule. 

La construction de blocs 

Lors de la construction d'un bloc if-else, veillez a bien verifier le nombre d'accolades 
ouvrante et fermante. Par exemple : 

if (premiere > deuxieme) 

trace(deuxieme + " " + premiere); 
laPlusGrande = premiere; 

el se 
{ 

trace(premiere+" "+deuxieme); 
laPlusGrande = deuxieme; 

} 

En executant pas a pas cet extrait de programme, nous observons qu'il n'y a pas d'acco- 
lade ouvrante ({) derriere 1' instruction if. Cette derniere ne possede done pas de bloc 
compose de plusieurs instructions. Seule l'instruction d'affichage trace(deuxieme + " " 
+ premiere); se situe dans le test if. L' execution de la structure if s'acheve done juste 
apres l'affichage des valeurs dans l'ordre croissant. 

Ensuite, l'instruction laPlusGrande = premiere; est theoriquement executee en dehors de 
toute condition. Cependant, l'instruction suivante est el se, alors que l'instruction if s'est 
achevee precedemment. Le lecteur Flash ne peut attribuer ce el se a un i f . II y a done une 
erreur du type « 'else' rencontre sans 'if correspondant ». 

De la meme facon, il y a une erreur de lecture lorsque le programme est construit sur la 
forme suivante : 

if (premiere > deuxieme) 

{.... 

} 

laPlusGrande = premiere; 

el se 
{... 
} 

Le point-virgule 

Dans le langage ActionScript 3.0, le point-virgule constitue une instruction a part entiere 
qui represente l'instruction vide. Par consequent, ecrire le programme suivant ne provoque 
aucune erreur a la lecture de 1' animation : 

if (premiere > deuxieme); 

trace(deuxieme + " " + premiere); 

L' execution de cet extrait de programme a pour resultat : 

Si premi ere est plus grand que deuxi erne, l'ordinateur execute le ; (point-virgule) situe imme- 
diatement apres la condition, e'est-a-dire rien. L'instruction if est terminee, puisqu'il n'y 
a pas d'accolades ouvrante et fermante. Seule l'instruction ; est soumise a if. 

Le message affichant les valeurs par ordre croissant ne fait pas partie du test. II est done 
affiche, quelles que soient les valeurs de premiere et deuxieme. 
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Des if-else imbriques 

Dans le cas de choix arborescents - un choix etant fait, d'autres sont a faire, et ainsi de 
suite-, il est possible de placer des structures if-else a l'interieur d'autres if-else. 
On dit alors que les structures if -el se sont imbriquees les unes dans les autres. 

Lorsque ces imbrications sont nombreuses, il est possible de les representer a l'aide d'un 
graphique de structure arborescente, dont voici un exemple : 



Imbrications d'if-else 


Representation du choix arborescent 


if (Condition 1) 
{ 


Condition 1 


if (Condition 2) 


I'au^/^N^Vrai 


{ 

instruction A 

} 


instruction C Condition 2 


Faux^/ / \ s Vrai 


el se 

{ 


instruction B instruction A 


instruction B 


Figure 4-2 


} 

} 


Imbrication d'if-else 


el se 




( 

instruction C 

1} 





Quand il y a moins d'else que d'if 

Une instruction i f peut ne pas contenir d' instruction else. Dans de tels cas, il peut parai- 
tre difficile de savoir a quel if est associe le dernier else. Comparons les deux exemples 
suivants : 



Imbrications d'if-else 


Arbre des choix 


if (Condition 1) 
{ 

if (Condition 2) 

1 

if (Condition 3) 
{ 

instruction A 

} 


Condition 1 

instruction C Condition 2 
"-\Vrai 

Condition 3 
Faux/^^Vrai 

instruction B instruction A 


el se 


Figure 4-3 


{ 

instruction B 

} 

} 


Imbrication d'if-else 


} 

el se 
{ 




instruction C 

1} 
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Imbrications d'if-else 


Arbre des choix 


if (Condition 1) 
{ 


Condition 1 


if (Condition 2) 
{ 


\Vrai 

Condition 2 


if (Condition 3) 
{ 


Faux^/*\Vrai 

instruction C Condition 3 


instruction A 

} 

el se 
{ 




instruction B instruction A 
Figure 4-4 


instruction B 

} 


Imbrication d'if-else 


} 

el se 




{ 

instruction C 




) 

1 





Du premier au deuxieme exemple, par le jeu des fermetures d' accolades, le dernier bloc 
el se est deplace d'un bloc vers le haut. Ce deplacement modifie la structure arborescente. 
Les algorithmes associes ont des resultats totalement differents. 



Remarque 

• Pour determiner quel i f se rapporte a quel el se, observons qu'un « bloc else » se rapporte toujours 
au dernier « bloc i f » rencontre auquel un el se n'a pas encore ete attribue. 

• Les blocs if et el se etant delimites paries accolades ouvrante etfermante, ilestconseille, pour eviter 
toute erreur, de bien reiier chaque accolade ouvrante avec sa fermante. 



Les techniques de programmation incontournables 

L'objectif ici est d'ameliorer sensiblement le jeu de bulles, en y ajoutant l'affichage d'un 
score et en simpliriant le lancement du jeu ainsi que la manipulation du curseur. Ces 
changements utilisent des techniques de programmation usuelles telles que le comptage 
de valeurs (voir la section « Calculer un score ») ou la mise en place de variables 
« drapeau » (voir la section « Le bouton a bascule »). 

Calculer un score 

Le score est une valeur numerique qui augmente a chaque fois que le joueur touche une 
bulle et qui diminue dans le cas contraire. II existe differentes methodes pour calculer 
cette valeur. Dans notre cas, nous prenons pour hypothese que : 

• Chaque bulle est dotee d'un coefficient variant entre 0 et 5. 

• Le score correspond a la somme des coefficients des bulles touchees par le curseur. 

• Lorsque le joueur manque une bulle, le score diminue de 5 points. 

Le score ainsi calcule est affiche dans la zone de texte « Score » (voir figure 4-5-0). 

Parallelement, nous afhchons dans la zone de texte « Eclats/Total » (voir figure 4-5-©) le 
nombre de bulles touchees par le joueur ainsi que le nombre de bulles effectivement 
lancees pendant toute la duree du jeu. 
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Figure 4-5 

Le score et le nombre de 
bulles lancees et/ou tou- 
chees sont affiches dans 
les zones de texte © et ©. 




Pour calculer chacune de ces valeurs (score, nombre de bulles lancees et/ou touchees), 
nous devons savoir compter les bulles. 

Compter des objets, accumulerdes valeurs 

Le comptage des valeurs, quelles qu'elles soient, est une technique tres utilisee en infor- 
matique. II existe deux facons de compter : 

• Le comptage d'un certain nombre de valeurs. Par exemple, compter le nombre de 
pieces se trouvant dans votre porte-monnaie. 

• L accumulation de valeurs. Calculer la valeur de votre porte-monnaie, le nombre 
d' euros et de centimes dont vous disposez (la valeur de chaque piece est accu- 
mulee). 

Le comptage et 1' accumulation de valeurs sont des techniques independantes du langage 
utilise. Elles s'appliquent dans bien des cas, du plus simple au plus complexe. 

Ainsi, dans notre cas, connaitre le nombre de bulles lancees et/ou touchees consiste 
simplement a compter les bulles en fonction de la situation (bulles touchees ou non), 
alors que pour calculer le score, nous devons accumuler le coefficient associe a chaque 
bulle. Examinons plus precisement la marche a suivre pour obtenir ces differentes 
valeurs. 

Compter les bulles 

Pour connaitre le nombre total de bulles lancees au cours de la partie, il suffit d'en ajouter 
une a la totalite a chaque fois qu'une bulle est remontee au-dessus de la scene, c'est-a- 
dire des qu'elle sort de l'ecran ou qu'elle rencontre le curseur. 

En supposant que la variable nbBullesTotal represente le nombre total de bulles creees 
lors de la partie, 1' instruction permettant d'en ajouter une au nombre total s'ecrit : 

nbBullesTotal++; 



Pour en savoir plus 

La notion decrementation est etudiee au chapitre 3, « Communiquerou interagir », section « La bulle 
se deplace toute seule en un seul die ». La notation condensee de I'incrementation estegalement 
decrite dans le chapitre 3, section « Notation condensee de I'incrementation ». 
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Le nombre total de bulles est increments uniquement lorsque la bulle sort de la scene ou 
lorsqu'elle est touchee par le curseur. L'instruction d' incrementation doit done etre inseree a 
l'interieur du test suivant : 

if ((bSavon.y > hauteur + bSavon. height/2) || (bSavon.hitTestPoint(btnJouer.x, 
^btnJouer.y) ) ) { 
nbBullesTotal++; 

//Replacer la bulle au-dessus de la scene n'importe ou 
//sur la largeur de la scene 

} 



Remarque 

Au lancement du jeu, le nombre total de bulles est nul, la variable nbBul l esTotal doit done etre initia- 
lises a 0 avanttoute operation. 



De la meme facon, pour connaitre le nombre de bulles touchees, il suffit d'en ajouter 
une au nombre total de bulles touchees. En supposant que la variable nbBul 1 esTouchees 
represente cette valeur, l'instruction nbBul lesTouchees++; placee a l'interieur du test 
if (bSavon.hitTestPoint(btnJouer.x, btnJouer.y)) permet d'incrementer le nombre de 
bulles touchees. La variable nbBul 1 esTouchees doit egalement etre initialisee a 0, des le 
lancement du jeu. 



Remarque 

Le compteur nbBul 1 esTouchees ne doit pas etre increments lorsque la bulle sort de I'ecran ; il est 
necessaire d'inserer un test verifiant que la bulle a bien ete touchee, a l'interieur du test a double condi- 
tion, comme suit : 

if ((bSavon._y > hauteur + bSavon._height/2) || 
(bSavon.hitTest(btnJouer)) ) { 
nbBullesTotal++; 

//Replacer la bulle au-dessus de la scene n'importe ou 
//sur la largeur de la scene 

if ( bSavon.hitTestPoint(btnJouer.x, btnJouer.y)) { 
nbBul 1 esTouchees++; 

} 

} 

Accumuler les coefficients 

Pour calculer le score, la methode est un peu moins simple. Le calcul s'effectue uniquement 
lorsque le curseur touche une bulle. Dans ce cas, nous devons : 

• calculer le coefficient associe a la bulle en tirant au hasard un nombre entre 0 et 5 ; 

• accumuler le coefficient au score deja obtenu ; 

• diminuer le score de 5 points, si une bulle n'est pas touchee par le curseur. 
Ces differentes operations sont realisees par les instructions suivantes : 

O valeurBulle = Math.random()*5; 

© scoreBulles = scoreBulles + Math.round(valeurBulle); 
© scoreBulles = scoreBulles - 5; 

ou val eurBul 1 e est une valeur calculee au hasard et scoreBul 1 es represente le score realise 
par le joueur. 
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O En multipliant Math. random( ) par 5, nous sommes assures que valeurBulle prend des 
valeurs comprises entre 0 et 5, Math. random( ) tirant une valeur au hasard entre 0 et 1. 

© La variable scoreBulles augmente progressivement la valeur tiree au hasard, par 
accumulation de la valeur precedente de scoreBulles avec la nouvelle valeur de 
valeurBulle. La valeur calculee par Math.randomO est un chiffre a virgule, alors que 
le score correspond a une valeur entiere. II convient done d'arrondir la valeur en utilisant 
lamethode Math.roundO. 

© La valeur du score est diminuee de 5 points par rapport a la valeur precedente. 

Ces differents calculs s'effectuent soit lorsque le curseur rencontre une bulle, soit, a 
l'inverse, lorsque le curseur ne touche pas la bulle. Les instructions doivent done etre 
placees a l'interieur d'une structure de test de type i f-el se, comme suit : 

if ( bSivon.hitTestPoint(btnJouer.x, btnJouer.y)) { 

valeurBulle = Math.random()*5; 
scoreBulles += Math . round(val eurBul 1 e) ; 
nbBul 1 esTouchees++; 

} 

el se { 

scoreBulles -= 5; 

} 



Remarque 

Les instructions : 

scoreBulles = scoreBulles + Math.round(valeurBulle); 
scoreBulles = scoreBulles - 5; 

peuvent s'ecrire d'une facon plus condensee comme suit : 
scoreBulles += Math.round(valeurBulle) ; 
scoreBulles -= 5; 

La variable scoreBul 1 es doit obligatoirement etre declaree et in itia lisee a 0 des le lancement du jeu, 
sous peine de fausser le resultat. 

Code completde bulleScore.fla 

La mise en place du score et des differents compteurs de bulles s'insere dans le code 
ActionScript comme ci-apres. 

Extension web 

Vous trouverez cetexemple dans le fichier BulleScore.fla sous le repertoire Exemples/Chapitre4. 



Notez que les instructions (en gras) permettent raffichage des variables nbBul lesTouchees, 
scoreBul 1 es et nbBul 1 esTotal dans les zones de texte ayant pour titre « Score » et « Eclats / 
Total ». Ces instructions doivent etre inserees dans le code au moment de l'initialisation 
des variables, puis a chaque fois qu'un evenement Event. ENTER_FRAME est traite par la 
bulle, de facon a ce que les valeurs affichees correspondent aux exploits de l'utilisateur. 

//Stocker la hauteur et la largeur de la scene 

var largeur:uint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

//Calculer un ecart de 5 % de la largeur de la fenetre 

var ecart:Number = 5 * largeur / 100; 
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//Declarer et initialiser les variables concernant le score et la vitesse 

var vitesse:uint = 10; 

var nbBullesTotal :uint = 0; 

var nbBullesToucheesruint = 0; 

var valeurBulle:uint = 0; 

var scoreBulles:uint = 0; 

//Le bouton btnJouer 

var btnJouer:BoutonClp = new BoutonClpO; 
btnJouer. x = largeur / 2; 
btnJouer. y = hauteur - btnJouer. height; 
btnJouer. buttonMode = true; 

//Lorsque le jeu est arrete, le texte « Cliquer » s'affiche dans le bouton 
btnJouer. labelOut. text = "Cliquer" ; 
addChi 1 d(btnJouer) ; 

//La bulle de savon 
var bSavon:BulleClp = new BulleClpO; 
bSavon.y = -bSavon. height ; 
bSavon.x = Math.random()*largeur; 
addChild(bSavon) ; 

//Les zones de texte 

var score:AfficherClp = new Aff icherCl p( ) ; 
var eclats:AfficherClp = new Aff i cherCl p( ) ; 
score. x = ecart; 

score. y = (hauteur - score. height) / 3; 
eclats. x = ecart; 

eclats. y = 2*(hauteur - eclats. height) /3; 

addChild(score) ; 

addChild(eclats) ; 

score. titreOut. text = "Score"; 

eclats. titreOut. text = "Eclat"; 

//Afficher les valeurs initial es du score et des compteurs de bulles 
eclats. labelOut. text = nbBullesTouchees + " / " + nbBullesTotal; 
score. labelOut. text = scoreBulles; 

//Les gesti onnai res d'evenements de 1 'animation 
function seDeplace(e:Event) :void{ 
bSavon.y +=vitesse; 

//Si la bulle sort de la fenetre ou si elle rencontre le curseur 

if ((bSavon.y > hauteur + bSavon. height/2) || (bSavon.hitTestPoint(btnJouer.x, 

*-btnJouer.y) ) ) { 

//Le nombre total de bulles affichees augmente de 1 
nbBullesTotal++; 

//Si la bulle rencontre le curseur 

if ( bSavon. hitTestPoint(btnJouer.x, btnJouer. y)) { 

//La bulle possede un coefficient entre 0 et 5 

valeurBulle = Math.random()*5; 

//le nombre de bulles touchees augmente de 1 

nbBul 1 esTouchees++; 

//Le score est calcule 

scoreBulles += Math.round(valeurBulle); 

//Les valeurs ainsi calculees sont placees dans leur zone respective 
eclats. labelOut. text = nbBullesTouchees + " / " + nbBullesTotal; 
score. labelOut. text = scoreBulles; 

} 
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//Si la bulle n'est pas touchee par le curseur 

//Le score diminue de 5 

else scoreBulles -= 5; 

score. labelOut. text = scoreBulles; 

eclats. labelOut. text = nbBullesTouchees + " / " + nbBullesTotal ; 

bSavon.y = -bSavon. height ; 
bSavon.x = Math.random()*largeur; 

} 

} 

//Le coloriage 

btnJouer.addEventListener(MouseEvent.MOUSE_OVER,colorierEnBleu) ; 
function colorierEnBleu(e:Event) :void { 

//La couleur 0x33CCCC 

var bleu:ColorTransform = new ColorTransform( ) ; 
bleu. color = 0x33CCCC; 

var objetAcolorienTransform = new Transform(btnJouer.fond) ; 
objetAcolorier.colorTransform = bleu; 

} 

btnJouer .addEventLi stener(MouseEvent .M0USE_0UT, colon' erEnBl anc) ; 
function colorierEnBlanc(e:Event):void { 

//La couleur OxFFFFFF 

var blanc:ColorTransform = new Col orTransform( ) ; 
blanc. color = OxFFFFFF; 

var objetAcolorier:Transform = new Transform(btnJouer.fond); 
objetAcolorier.colorTransform = blanc; 

} 

//Le deplacement du curseur 

btnJouer .addEventLi s tener( Mouse Event .M0USE_DOWN, 1 eCurseurSeDepl ace) ; 
function leCurseurSeDeplace(event:MouseEvent):void { 

bSa von. addEventLi stener( Event. ENTER_FRAME,seDepl ace) ; 

var zoneDeplacement:Rectangle = new Rectangle(0, btnJouer. y, largeur, 0); 

btnJouer .start Drag (true, zoneDepl acement) ; 

//Lorsque le jeu est lance, le texte "Jouer" s'affiche dans le bouton 
btnJouer. labelOut. text = "Jouer" ; 

} 

btnJouer .addEventLi stener(MouseEvent .M0USE_UP,onRel ache) ; 
function onRelache(e:Event) { 

//Lorsque le jeu est arrete, le texte « Cliquer » s'affiche dans le bouton 
btnJouer. labelOut. text = "Cliquer" ; 

} 

Le bouton a bascule 

Nous souhaitons modifier le mode de fonctionnement du curseur. En effet, pour demarrer 
le jeu, le joueur doit cliquer sur le curseur et maintenir le clic pour deplacer le curseur et 
continuer a jouer. Ce mode d'interaction est peu ergonomique. 

Nous nous proposons de modifier le lancement du jeu de facon a ce que le joueur n'ait 
plus a maintenir le clic pour continuer a jouer. La methode est la suivante : 

• Le jeu demarre au premier clic sur le curseur. Le joueur peut relacher le bouton de la 
souris et continuer a deplacer le curseur. Le jeu fonctionne alors comme precedemment, 
en affi chant le score ainsi que le nombre de bulles touchees et creees. 

• Le jeu s' arrete lorsque le joueur clique une seconde fois sur le curseur. 

• Pour recommencer a jouer, le joueur clique une nouvelle fois sur le curseur. 
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Le curseur fait office de bouton a bascule. Son comportement est similaire a celui d'un 
interrupteur qui eteint une lampe lorsqu'elle est allumee et inversement allume cette 
meme lampe si elle est eteinte. Ici, un clic sur le curseur lance le jeu si celui -ci est arrete, 
et stoppe le jeu s'il est en cours de fonctionnement. 

Les variables « drapeau » 

Pour realiser le comportement d'un bouton a bascule, la technique consiste a utiliser une 
variable « drapeau » (« flag » en anglais) dont la valeur change en fonction de celle 
qu'elle contient. 



Remarque 

Le terme « drapeau » fait allusion au systeme de fonctionnement des boites aux lettres americaines 
munies d'un drapeau rouge. Lorsque le facteur vient deposer du courrier, le drapeau estreleve. Le facteur 
abaisse le drapeau pour indiquer la presence de courrier. Lorsque le destinataire prend son courrier, il 
releve le drapeau, indiquantque la boTte estdesormais vide. Ainsi, la position (etat) du drapeau indique la 
presence (drapeau abaisse) ou non (drapeau leve) de courrier dans la boite aux lettres. 



Plus precisement, une variable « drapeau » est susceptible de contenir deux valeurs (etat 
abaisse ou leve). Le plus souvent il s'agit de valeurs booleennes (true ou fal se). Le chan- 
gement d'etat du drapeau s'effectue de la facon suivante : 

Si (drapeau est vrai) { 

Realiser les actions concernees par l'etat « vrai »; 
Mettre le drapeau a faux; 

} 

Si non { 

Realiser les actions concernees par l'etat « faux »; 
Mettre le drapeau a vrai ; 

} 

Concernant le jeu de bulles, la traduction de cet algorithme en ActionScript s'effectue en 
supposant que l'etat : 

• « faux » correspond au jeu arrete. 

• « vrai » correspond au jeu en cours de fonctionnement. 

La variable « drapeau » est nominee jeuLancer. Elle est initialisee a fal se, le jeu ne fonc- 
tionnant pas au lancement de 1' application. La structure generale du programme est la 
suivante : 

//La variable jeuLancer represente l'etat du jeu 

//Au debut, le jeu est arrete, jeuEnCours est initialise a false 

var jeuLancer: Bool ean = false; 

//Lorsque l'on clique sur le curseur : 

btnJouer.addEventListener(MouseEvent.MOUSE_DOWN, onAppuie) ; 
function onAppuie(event:MouseEvent) :void { 

//Si le jeu est lance (une bulle se deplace) 
if (jeuLancer == true) { 

//Arreter le jeu 

jeuLancer = false; 

} 

} else { 

//Si le jeu est arrete (aucune bulle ne se deplace) 
//Lancer le jeu 
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jeuLancer = true; 



Examinons maintenant quelles instructions sont a inserer dans les blocs if ou else, pour 
lancer ou stopper le jeu. 

Lorsque le jeu est arrete 

Le jeu est arrete et nous devons le lancer. Nous devons faire en sorte que : 

• La bulle descende. 

• Le curseur se deplace a l'horizontale. 

• Le score s'affiche au fur et a mesure des bulles touchees. 

Les instructions realisant toutes ces actions sont celles ecrites dans la fonction onAppuie( ) 
du programme bulleScore.fi a precedent. Pour lancer le jeu, il suffit done d'inserer 
1' ensemble de ces instructions a l'interieurdu test if (jeuLancer == true). Reportez-vous 
a la section « Le gestionnaire MouseEvent.MOUSE_DOWN de bulleBoutonBascule.fla » ci-apres, 
pour examiner le nouveau code du gestionnaire MouseEvent.MOUSE_DOWN. 

Lorsque le jeu est lance 

Le jeu est en cours et nous devons l'arreter. Pour cela : 

• La bulle doit etre placee en haut de la scene et doit rester invisible. 

Pour que la bulle reste invisible, il convient de la placer en haut de la scene, de facon 
aleatoire, sur toute la largeur de la scene grace aux instructions : 

bSavon.x = Math.random()*largeur; 
bSavon.y = -bSavon. height; 

La bulle ne doit plus se deplacer vers le bas. Pour cela, nous devons l'empecher de 
traiter les evenements de type Event . ENTER_FRAME. Cette action est realisee par 
1' instruction : 

bSavon . removeEventLi stenert Event . ENTER_FRAME, seDepl ace) ; 

En supprimant la methode seDeplaceO de l'ecouteur d'evenements Event. ENTER_FRAME, 
associe a l'objet bSavon, nous empechons ce dernier de receptionner l'evenement 
Event. ENTER_FRAME. La position de la bulle n'est plus incrementee. La bulle reste sur 
place. 

• Le curseur doit rester a la position du dernier clic. II ne peut plus etre deplace. Pour 
stopper le deplacement du curseur, il suffit de faire appel a la methode stopDragO, 
comme suit : 

btnJouer.stopDrag( ) ; 

Le deplacement de la bulle vers le haut de la scene ainsi que 1' arret de 1' animation sont des 
actions effectuees pour donner la sensation au joueur que le jeu est arrete. Lensemble de 
ces instructions doit etre place a l'interieur du bloc el se { jeuxLancer = f al se ; }. Reportez- 
vous a la section « Le gestionnaire MouseEvent.MOUSE_DOWN de bulleBoutonBascule.fla » 
ci-apres, pour examiner le nouveau code du gestionnaire MouseEvent.MOUSE_DOWN. 
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Question 

Comment donner la sensation au joueur qu'il commence une nouvelle parte a chaque fois qu'il relance le 
jeu ? 

Reponse 

Lorsque le joueur stoppe le jeu puis le relance, le nouveau score est calcule a partir du score precedent. 
Pour donner la sensation au joueur qu'il debute une nouvelle parte, la technique consiste a repartir d'un 
score nul, en reinitialisanttoutes les valeurs - score, nombre total de bulles et/ou touchees - a 0, grace 
aux instructions : 

nbBullesTotal = 0; 
scoreBulles = 0; 
nbBul 1 esTouchees = 0; 

^initialisation de ces valeurs esteffectuee lorsque le jeu est stoppe, de facon a ce que les valeurs soient 
correctementreinitialisees pour la parte suivante. 

Le gestionnaire MouseEvent.MOUSE_DOWN de bulleBoutonBascule.fla 

La mise en place du curseur sous forme d'un bouton a bascule s'insere dans le code du 
gestionnaire d'evenement MouseEvent.M0USE_D0WN de l'objet btnJouer, comme ci-apres. 

Extension web 

Vous trouverez cetexemple dans le fichier BulleBoutonBascule.fla sous le repertoire Exemples/ 
Chapitre4. 

btnJouer. addEventListener(MouseEvent.MOUSE_DOWN, onAppuie) ; 
function onAppuie(event:MouseEvent) :void { 

var zoneDeplacement: Rectangle = new RectangletO, btnJouer. y, largeur, 0); 
//Si le jeu est lance (une bulle se deplace) 
if (jeuLancer == true) { 
//Arreter le jeu 
jeuLancer = false ; 
btnJouer. labelOut. text = "Cliquer" ; 

//Reinitialiser le score et les compteurs de bulles pour creer une nouvelle partie 
nbBullesTotal = 0; 
scoreBulles = 0; 
nbBul 1 esTouchees = 0; 

eclats. labelOut. text = nbBul 1 esTouchees+ " / " + nbBullesTotal; 
score. labelOut. text = scoreBulles; 

bSavon . removeEventLi stener( Event . ENTER_FRAME, seDepl ace) ; 
bSavon.y = -bSavon. height ; 
bSavon.x = Math. random( )*1 argeur ; 
btnJouer. stopDrag( ) ; 
} else { 

//Si le jeu est arrete (aucune bulle ne se deplace) 

//Lancer le jeu 

jeuLancer = true ; 

btnJouer. labelOut. text = "Jouer" ; 

btnJouer. startDrag(t rue, zoneDepl acement) ; 

bSa von. addEvent Li stenert Event. ENTER_FRAME, seDepl ace) ; 

} 
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Remarque 

La mise en place du drapeau jeuLancer fait qu'il n'est plus necessaire de traiter Pevenement 
MouseEvent .M0USE_UP. Le deplacement du curseur (stopDrag( ) et startDrag( )) est entierement 
traits par Is gsstionnairs d'svsnsmsnt MouseEvent. M0USE_D0WN. 



L'instruction switch ou comment faire des choix multiples 

Lorsque le nombre de choix possibles est plus grand que deux, 1' utilisation de la structure 
i f -el se devient rapidement fastidieuse. Les imbrications de blocs demandent a etre verifiees 
avec precision, sous peine d'erreurs de compilation ou d' execution. 

C'est pourquoi, le langage ActionScript 3.0 propose l'instruction switch (traduire par 
« selon » ou « suivant »), qui permet de programmer des choix multiples selon une 
syntaxe plus claire. 

Construction du switch 

L'ecriture de l'instruction switch obeit aux regies de syntaxe suivantes : 

switch (valeur) 
{ 

case etiquette 1 : 

//Une ou plusieurs instructions 
break; 

case etiquette 2 : 
case etiquette 3 : 

//Une ou plusieurs instructions 
break; 
default : 

//Une ou plusieurs instructions 

} 

La variable valeur est evaluee. Suivant celle-ci, le programme recherche l'etiquette 
correspondant a la valeur obtenue et definie a partir des instructions case etiquette. 

1. Si le programme trouve une etiquette correspondant au contenu de la variable val eur, 
il execute la ou les instructions qui suivent l'etiquette, jusqu'a rencontrer le mot-cle 
break. 

2. S'il n'existe pas d' etiquette correspondant a valeur alors le programme execute les 
instructions de l'etiquette default 



Remarque 

• Uns etiquette peutconteniraucune, une ou plusieurs instructions. 

• L'instruction break permetde sortirdu bloc switch. S'il n'y a pas de break pourune etiquette donnee, 
le programme execute les instructions de l'etiquette suivante. 



Une calculatrice a 4 operations 

Pour mettre en pratique l'utilisation de la structure switch, nous allons transformer 
l'application AdditionFinal . f 1 a construite au chapitre 3 de facon a obtenir une calcula- 
trice qui effectue les quatre operations elementaires : addition, soustraction, multiplication 
et division. 



164 



Apprendre a programmer en ActionScript 3 



ns= Pour en savoir plus 

L'application AdditionFinale.fla est developpee dans les sections « Une calculatrice pour faire des 
additions » et« Definir un gestionnaire d'evenements » du chapitre 3, « Communiquer ou interagir ». 

Le mode de fonctionnement de la calculatrice reprend celui de l'application 
additionFinale.fi a. La difference reside dans la gestion de l'operateur. 



Figure 4-6 

L'operateur est saisi 
par Vintermediaire 
de I 'objet signe. 






L'objet correspondant a l'operateur n'est plus une simple zone d'affichage (voir figure 4-6), 
mais une zone de saisie permettant a l'utilisateur d'indiquer quelle operation il souhaite 
effectuer. 

Sachant cela, nous devons, a partir du fichier AdditionFinale.fla : 

1. Transformer le symbole OperateurClp, en modifiant la zone de texte statique en zone 

de texte de saisie, et en la nommant label In. L'objet cree a partir de ce symbole 
s'appelle toujours signe. 

ds= Pour en savoir plus 

La manipulation des zones de texte de saisie est decrite au chapitre 3, « Communiquer ou interagir », 
section « Les differents modes de communication ». 

2. A l'aide de l'objet signe. labelln, recuperer le signe de l'operateur saisi dans une 
variable de type String nominee operateur. 



Remarque 

Pour connaitre le type de I'operation a realiser, la structure switch evalue le contenu de la variable 
operateur. 



3. A l'interieur de la structure switch, traiter les differents types d'operations en creant 
autant d'etiquettes qu'il y a d'operateurs, c'est-a-dire quatre. Compte tenu du fonc- 
tionnement de la structure switch, chaque etiquette correspond au caractere representant 
I'operation demandee (+ pour 1' addition, - pour la soustraction, etc.). 

4. Pour chacune des etiquettes, realiser I'operation souhaitee et afficher le resultat dans 
la zone d'affichage resultat. label Out. text. 
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Le gestionnaire MouseEvent.MOUSEJJP de calculatrice.fla 

La mise en place de la structure swi tch s'insere dans le code du gestionnaire d'evenement 
MouseEvent.MOUSEJJP de l'objet egal, comme ci-apres. 

Extension web 

Vous trouverez cet exemple dans le fichier Calculatrice.fla sous le repertoire Exemples/ 
Chapitre4. 



egal .addEvent Listener (MouseEvent .MOUSE_UP,onRel ache) ; 
function onRelache(event:MouseEvent) :void{ 
var a, b :Number ; 

//Transformer la valeur saisie depuis l'objet valeur_l en valeur numerique 
a = Number( val eur_l .1 abel In .text) ; 
trace( "a : " + a ) ; 

//Transformer la valeur saisie depuis l'objet valeur_2 en valeur numerique 
b = NumberCval eur_2.1 abel In. text) ; 
trace( "b : " + b) ; 

//Recuperer le signe de l'operation et le stocker dans operateur 
var operateur:String = signe. label In. text: 
trace( "operateur : "+ operateur); 
switch (operateur) { 
default : 

//Par defaut la calculatrice fait une addition 
case "+" : 

//Afficher le resultat de l'operation directement 
//dans l'objet resultat 
resultat. labelOut. text = a + b; 
break; 

case 

//Afficher le resultat de l'operation directement 
//dans l'objet resultat 
resultat. labelOut. text = a - b; 
break; 
case "*" : 

//Afficher le resultat de l'operation directement 
//dans l'objet resultat 
resultat. labelOut. text = a * b; 
break; 
case "/" : 
resultat. labelOut. text = a / b; 
break; 

} 

} 

Apres avoir saisi les deux valeurs et l'operateur, l'utilisateur valide ses choix en cliquant 
sur le signe =. La variable operateur est evaluee. Le lecteur Flash compare cette valeur 
aux etiquettes proposees dans la structure switch. 

Ainsi, par exemple : 

• si l'utilisateur saisit les valeurs 4, * et 2, le lecteur Flash trouve la correspondance avec 
l'etiquette "*" et execute les instructions associees a cette etiquette. Le resultat affiche 
est 8. 
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• si l'utilisateur saisit les valeurs 2, % et 5, le lecteur Flash ne trouve aucune corres- 
pondance entre le caractere % et les etiquettes proposees. II execute alors les 
instructions de l'etiquette default. Cette derniere ne contient aucune instruction et 
precede l'etiquette "+". Puisque aucune instruction break ne separe ces deux 
etiquettes, le lecteur Flash execute les instructions de l'etiquette "+". Le resultat affiche 
est 7. 



Remarque 

L'erreur de saisie d'une valeur peut etre evitee en utilisant Poption Caractere situee dans le panneau 
Proprieties d'une zone de texte de type Texte Dynamique ou Texte de Saisie. Par cet intermediate, 
il est possible de contraindre Paffichage ou la saisie de valeurs a un jeu de caracteres specifiques. Ainsi, 
la zone de saisie des objets val eur_l et val eur„2 (voir figure 4-7), est restreinte aux chiffres compris 
entre 0 et 9 ainsi qu'au caractere de ponctuation « . » 



Figure 4-7 



L'option Integrer 
d'une zone de texte 
dynamique ou de 
saisie permet de 
restreindre le type de 
caracteres a afficher. 



Selectionnez les jeux de caracteres a integrer. Pour 
en selecrjonner plusieurs ou en deselecrjormer un, 
urjlisez Ctrl4dc. 
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Question 

Que se passe-t-il si l'utilisateur effectue une division par 0 ? 
Reponse 

Le programme affiche le terme « Infinity* dans la zone de texte resultat. label Out. text. Pour 
remplacer le terme « Infinity » par « Infini », vous devez tester la valeur du quotient de fagon a modifier 
Paffichage du resultat comme suit : 

case "/" : 

// Verifier si on divise par 0 ou non 
If ( b — 0) { 

resultat. labelOut. text = "infini"; 
} else { 

resultat. labelOut. text = a / b; 

} 

break; 



Faire des choix 

Chapitre 4 



Comment choisir entre if-else et switch ? 

Dans la plupart des langages (C, Java...), la structure switch ne permet de tester que des 
egalites de valeurs. Elle n'est pas utilisee pour rechercher si la valeur est plus grande, 
plus petite ou differente d'une certaine etiquette. A l'inverse, l'instruction if-else peut 
etre employee dans tous les cas en testant tout type de variable, selon toute condition. 

Cependant, avec le langage ActionScript, il est possible de tester grace a la structure 
switch si une variable appartient a un intervalle de valeurs ou non. La technique consiste 
a remplacer la valeur testee par un booleen, et les etiquettes par les differents intervalles 
a tester, comme suit : 

switch(true) { 

case (objet.x < 0) : 

trace ( " objet.x < 0" ) ; 
break; 

case (objet.x >=0 && objet.x <= largeur) : 

traceC'L'objet se situe sur la scene"); 
break; 

case (objet.x > largeur) : 

trace ("objet.x > largeur"); 
break; 

} 

Lorsque la structure switch est executee, chacune des etiquettes est evaluee comme une 
condition dont le resultat est vrai ou faux. Ce resultat est ensuite compare a la valeur 
testee, soit ici true. 

Ainsi, par exemple, si l'objet etudie se trouve au milieu de la scene, la coordonnee en x, 
est superieure a 0 et inferieure ou egal a la largeur. L' etiquette (objet.x >=0 && 
objet.x <= largeur) vaut true. II y a done egalite entre l'etiquette et l'expression true 
placee a l'interieur du switch. L'instruction associee a l'etiquette traceC'L'objet se situe 
sur la scene) est alors executee. 

Notez que si plusieurs etiquettes sont evaluees a true, seules les instructions de la 
premiere etiquette de la liste seront executees. 

Ainsi, pour choisir entre la structure if -el se et switch, tout n'est done qu'une histoire de 
probabilites. En effet, si toutes les conditions ont une probability voisine ou equivalente 
d'etre realisees, la structure swi tch est plus efficace. Elle ne demande qu'une seule evaluation, 
alors que dans les instructions i f -el se imbriquees, chaque condition doit etre evaluee. 

Enfin, si une condition parmi d'autres conditions envisagees a une plus grande probabi- 
lite d'etre satisfaite, celle-ci doit etre placee en premier test dans une structure i f -el se, de 
facon a eviter a l'ordinateur d'effectuer trap de tests inutiles. 



Memento 



Les structures de test permettent d'executer ou non un bloc d' instructions en fonction de 
la veracite d'une condition. 



Verifier si un objet est sur la scene ou non 

if (objet.x >= 0 && objet.x <= largeurH 

traceC'L'objet se situe sur la scene"); 
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else { 

if (objet.x < OH 

trace ("L'objet se trouve a gauche de la scene"); 

} 

el se { 

trace ("L'objet se trouve a droite de la scene"); 

} 

} 

Ici, deux structures i f-el se sont imbriquees. La premiere verifie si la position en x d'un 
objet est comprise entre 0 et 1 argeur. Dans ce cas, l'objet se situe bien a l'interieur de la 
scene (en x). Sinon, deux autres solutions sont possibles : soit la position est inferieure a 
0, l'objet se trouve a gauche de la scene, soit elle est superieure a 1 argeur (le cas inferieur 
a largeur etant traite par la toute premiere condition). L'objet se trouve alors a droite de la 
scene. 

Verifier si un objet entre en collision avec un autre 

La methode hitTestPoint detecte si deux objets places sur la scene se recouvrent. La 
syntaxe d'utilisation de la methode hitTestPoint( ) est la suivante : 

if (objetA.hitTestPointtobjetB.x, objetB.y) == true ) { 
traceC L'objet A se situe sur la position objetB.x, objetB.y"); 



La technique des variables drapeau 

Une variable « drapeau » est utilisee pour modifier le comportement de 1' application en 
fonction de l'etat du drapeau (true ou fal se). Le changement d'etat du drapeau s'effectue 
de la facon suivante : 

Si (drapeau est vrai ) { 

Realiser les actions concernees par l'etat « vrai »; 
Mettre le drapeau a faux; 

} 

Sinon { 

Realiser les actions concernees par l'etat « faux »; 
Mettre le drapeau a vrai 

} 

Choisir une option parmi d'autres 

switch (option) { 

case "MenuFichier" : 

//Afficher les options du menu Fichier 
break; 

case "MenuEdition" : 

//Afficher les options du menu Edition 
break; 

case "MenuAffichage" : 

//Afficher les options du menu Affichage 

break; 

default : 

//Traiter les autres cas 

} 
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La structure switch simplifie l'ecriture des tests a choix multiples. Suivant la valeur 
contenue dans la variable option, l'une des 4 etiquettes proposees (MenuFichier, MenuEdition, 
MenuAf f i chage ou def aul t) est executee. 



Exercices 



Extension web 

Pourvous faciliter la tache, les symboles proposes pourchacun des exercices sontdefinis dans le fichier 
Exercice4_*.fl a (* variantde 1 a 7), situe dans le repertoire Exercices/SupportPourReal iserLes 
Exercices/Chapitre4. Dans ce meme repertoire, vous pouvez acceder a I'application telle que nous 
souhaitons la voirfonctionner(Exercice4_*.swf) une fois realisee. 



Rechercher la plus grande valeur parmi d'autres (le meilleur score) 
Exercice 4.1 

L'objectif de cet exercice est d'afhcher un tableau de scores (voir figure 4-8) des que 
l'utilisateur clique sur le curseur pour arreter la partie. Le tableau afhche le score de la 
partie courante, le meilleur score realise lors de la session ainsi que le taux de bulles eclatees. 

La mise en place du tableau de scores s'effectue en trois temps : 

1 . Creez le symbole representant le tableau de scores : 

Le tableau est un clip nomme ScoreFi nal CI p compose de trois symboles Aff i cherScoreCl p 
nommes respectivement score (voir figure 4-8-0), meilleurScore (voir figure 4-8-©) 
et tauxBulle (voir figure 4-8-©). Le symbole AfficherScoreClp est compose d'un 
fond et d'une zone de texte dynamique nominee 1 abel Out. 

Figure 4-8 

Le tableau de scores 



2. Le tableau de scores s'afhche lorsque le joueur clique sur le curseur pour arreter le 
jeu. Lafhchage du tableau de scores s'effectue de la facon suivante : 

- creez en memoire deux objets : un objet nomme boite de type Sprite et un objet 
nomme tableauScore de type ScoreFi nal CI p ; 

- placez le conteneur boite au centre de la scene. A cette etape, les objets boite et 
tableauScore ne sont pas places dans la liste d'affichage ; 




170 



Apprendre a programmer en ActionScript 3 



- l'affichage du tableau de scores s'effectuant au moment du second clic sur le curseur, 
reperez, dans le gestionnaire associe a btnJouer (voir le fichier bul 1 eBoutonBascul e . f 1 a 
donne en exemple, a la section « Le bouton a bascule »), le lieu oil placer les 
instructions de creation du tableau de scores ; 

- a cet endroit, ajoutez l'objet tableauScore a la liste d'affichage du conteneur boite. 
Ajoutez egalement le conteneur boite a la liste d'affichage principale. 



Remarque 

instruction A.addchild(B)a pour resultat d'ajouter l'objet B a la liste d'affichage de l'objet A. Les 
objets A et B sontde type Sprite et/ou MovieCl ip. Le conteneur boite est avant tout utilise pourtraiter 
I'effacement de la boite de score, a la reprise du jeu. 



3. Affichez les valeurs correspondant au score, au nombre de bulles eclatees dans les 
zones de texte dynamique : 

- La zone de texte dynamique score affiche le score courant qui correspond a la variable 
scoreBul 1 e. 

- Le meilleur score est calcule en creant une variable scoreMax initialisee a 0. Pour 
calculer le meilleur score, la technique consiste a verifier si le score (scoreBul 1 e) est 
plus grand que le meilleur score (scoreMax). Si tel est le cas, cela signifie que le 
meilleur score n'est plus scoreMax mais scoreBulle. II convient done d'enregistrer 
cette valeur dans la variable scoreMax. Affichez ensuite le meilleur score a l'aide de 
la zone de texte dynamique mei 1 1 eurScore. 

- Le taux de bulles eclatees est affiche dans la zone de texte dynamique tauxBul 1 e. Sa 
valeur est obtenue en calculant le pourcentage de bulles eclatees par rapport au 
nombre de bulles creees, avec la formule : 

NombreDeBul 1 esEcl atees / nombreDeBul 1 esCreees * 100 

4. Effacez le tableau de scores : 

Le joueur relance le jeu en cliquant sur le curseur. Le tableau doit s'effacer pour 
laisser place a la bulle. Le tableau s'efface en le supprimant de la liste d'affichage 
par 1' intermediate de la methode removeChildAtO. Pour supprimer le tableau de la 
liste d'affichage, il est necessaire de verifier qu'il est present dans cette liste. Pour 
cela, vos devez verifier que le conteneur boite possede un element dans sa propre 
liste d'affichage. Cette verification est realisee en utilisant le test i f ( boi te . numChi 1 dren 
> 0). 



Remarque 

La presence ou non du tableau de scores sur la scene peut etre plus simplement traitee en utilisant la 
propriete vi si bl e de l'objet tabl eauScore. Dans ce cas, il n'est pas necessaire d'utiliser le conteneur 
boite pour placer le tableau de scores sur la scene, (voir corrige Exercice4_lbis.fla). Afficherou non 
le tableau de scores en utilisant cette technique est plus simple. Cependant, cette technique presente 
I'inconvenient de surcharger inutilement la liste d'affichage. Le tableau est toujours present dans la liste, 
mais il n'est affiche qu'en fin de chaque partie. 
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Comprendre les niveaux d 'imbrication 
Exercice 4.2 

Le jeu de bulles s'arrete automatiquement au bout de 50 bulles lancees. Le tableau de 
scores apparait alors. 

Les instructions qui ont pour role d' arreter le jeu ne sont plus placees dans le gestionnaire 
associe au bouton btnJouer mais dans le gestionnaire qui compte le nombre de bulles 
lancees. 

Reperez dans l'exercice precedent le gestionnaire qui s'occupe de deplacer et de compter 
les bulles lancees. Placez a l'interieur de ce gestionnaire le test decrit ci-apres. 

Si le nombre de bulles depasse 50, vous devez : 

• Verifier si le score effectue est meilleur que le precedent et mettre a jour la variable 
scoreMax le cas echeant. 

• Afficher le tableau de scores. 

• Reinitialiser les differents compteurs. 

• Arreter 1' animation de la bulle. 

• Replacer la bulle vers le haut de la scene. 

• Stopper le deplacement du curseur. 

Si le nombre de bulles est inferieur a 50, le jeu continue sauf si le joueur clique sur le 
curseur. Dans ce cas, 1' animation est arretee, les scores et les compteurs ne sont pas reini- 
tialises et le curseur ne se deplace plus. 

Exercice 4.3 

Une bulle se deplace sur la scene sans sortir de l'ecran. Lorsqu'elle se trouve sur un de 
ses bords, elle rebondit. La bulle se deplace plus ou moins vite, en fonction d'une valeur 
calculee aleatoirement. Pour realiser cette animation, vous devez : 

1. Definir les valeurs maximales de la scene et placer la bulle sur la scene, au hasard. 

2. Calculer une vitesse de deplacement sur la verticale et sur l'horizontale (comprise 
entre 10 et 20). 

3. Lancer l'animation en detectant l'evenement Event. ENTER_FRAME. La bulle se deplace 
en fonction des vitesses calculees a l'etape precedente. 

4. Pour faire rebondir la bulle : 

• Verifier que sa position en x ne depasse pas la valeur maximale (bord droit de la 
scene). 

- Si tel est le cas, modifier la vitesse de facon a deplacer la bulle vers la gauche. 

- Sinon, verifier que sa position en x ne depasse pas la valeur minimale (bord gauche 
de la scene). Si tel est le cas, modifier la vitesse de facon a deplacer la bulle vers la 
droite. 

• Verifier que sa position en y ne depasse pas la valeur maximale (bord inferieur de la 
scene). 

- Si tel est le cas, modifier la vitesse de fagon a deplacer la bulle vers le haut. 
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- Sinon, verifier que sa position en y ne depasse pas la valeur minimale (bord supe- 
rieur de la scene). Si tel est le cas, modifier la vitesse de facon a deplacer la bulle 
vers le bas. 



Remarque 

• Pourdonner la sensation que la bulle entre en collision avec les bords de la scene, le test verifiant que 
la bulle ne depasse pas les limites de la scene doittenircompte de la position du point de reference du 
symbole BulleClp. 

• Pour changer le sens de deplacement de la bulle, il suffitde rendre la vitesse positive ou negative, selon 
I'orientation choisie. 

Exercice 4.4 

Reprendre 1' exercice 3-4 du chapitre precedent. 

L'oiseau et l'agneau reviennent a leur position initiale lorsqu'ils sortent de la scene. 
L'agneau revient directement a sa position de depart alors que l'oiseau fait demi-tour et 
traverse la scene dans le sens inverse. Les deux traversent a nouveau la scene. L' anima- 
tion boucle de facon infinie. Les boutons Lecture, Pause et Stop ont les memes comportements 
que ceux de finis lors de 1' exercice 3-4 du chapitre precedent. 

1. Animation de l'agneau 

L'agneau va uniquement de la gauche vers la droite. Testez la position de l'agneau 
lors de son deplacement. Si sa position en x depasse la largeur de la scene, replacez 
l'agneau sur le cote gauche de la scene. 

2. Animation de l'oiseau 

L'oiseau va de la gauche vers la droite puis de la droite vers la gauche, etc. L'oiseau 
sort done de la scene par la gauche ou par la droite. 

- Testez la position de l'oiseau lors de son deplacement. Si sa position en x depasse 
la largeur de la scene (sortie a droite) ou devient negative (sortie a gauche), changez 
l'oiseau d'orientation et modifiez son sens de deplacement. 

- Pour aller de la droite vers la gauche, la position en x de l'oiseau est incrementee de 
vitesseOiseau. A l'inverse, pour aller de la gauche vers la droite, la position est 
incrementee de -vitesseOiseau. La vitesse passe done d'une valeur negative a une 
valeur positive en fonction du sens de deplacement de l'oiseau. Ce changement est 
facilement realisable en utilisant 1' instruction : 

vitesseOiseau *= -1; 

A chaque fois que cette instruction est executee, la variable change de signe (son 
contenu est multiplie par -1), l'oiseau se deplace done dans le sens inverse. 

- Pour changer I'orientation de l'oiseau (tete en avant vers la gauche ou tete en avant 
vers la droite), la methode consiste a effectuer une mise a l'echelle inverse. En 
effet, faire une mise a l'echelle de -1 sur l'axe des X a pour effet de realiser une 
symetrie par rapport a l'axe vertical lorsque l'objet est affiche a l'echelle 1. Ainsi, 
1' instruction : 

oiseau.scaleX *= -1; 

change I'orientation de l'oiseau a chaque fois qu'elle est appelee. 



Faire des choix 

Chapitre 4 



3. Faire une pause, ou stopper l'animation 

Lorsque l'utilisateur clique sur le bouton Pause ou Stop, les objets cessent leur 
course a travers Pecran. Si l'utilisateur clique a nouveau sur le bouton Lecture, les 
objets recommencent a se deplacer. L'oiseau se deplace dans le sens oil il volait 
avant la pause. 

- Que se passe-t-il si vous appuyez sur le bouton Pause ou Stop, puis Lecture alors que 
l'oiseau se deplace de la droite vers la gauche ? Pourquoi ? 

- Pour corriger ce defaut, il convient de memoriser la vitesse de l'oiseau (et done le 
sens de deplacement) lorsque l'utilisateur clique sur Pause ou Stop, puis d'initialiser 
la vitesse de l'oiseau a cette valeur lorsque l'utilisateur clique sur le bouton Lecture. 

- La variable permettant de memoriser cette valeur doit etre correctement initialisee 
au moment de sa declaration. 



Manipuler les choix multiples 
Exercice 4.5 

Modifier l'exercice 4.3, de facon a remplacer les tests i f -el se, verifiant que la bulle reste 
sur la scene par une structure swi tch. Les etiquettes de la structure swi tch sont composees 
de tests d'inegalite de valeurs. 

Exercice 4.6 

Nous souhaitons calculer automatiquement le nombre de jours correspondant a un mois 
donne. Le nombre de jours du mois de fevrier variant selon l'annee (bissextile ou non), 
P application demande de saisir le mois et l'annee comme suit : 



Figure 4-9 

Champs de saisie du 
mois et de I 'annee 




Saisir le mois et 
l'annee 
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Le nombre de jours dans un mois peut varier entre les valeurs 28, 29, 30 ou 31, suivant le mois 
et l'annee. Les mois de janvier, mars, mai, juillet, aout, octobre et decembre sont des mois 
de 31 jours. Les mois d'avril, juin, septembre et novembre sont des mois de 30 jours. 
Seul le mois de fevrier est particulier, puisque son nombre de jours est de 29 pour les 
annees bissextiles et de 28 dans le cas contraire. Sachant cela, nous devons : 

1. Enregistrer les valeurs du mois et de l'annee saisies dans les zones de texte, dans les 
variables moisLu et anLu. E valuer la variable moisLu par l'intermediaire de la structure 
switch. 

2. Creer autant d'etiquettes qu'il y a de mois dans une annee, c'est-a-dire 12. Chaque 
etiquette est une chaine de caracteres correspondant au nom du mois de l'annee (janvi er, 
fevrier, etc.). 

3. Regrouper les etiquettes relatives aux mois a 31 jours et stocker cette derniere valeur 
dans une variable specifique. 

4. Regrouper les etiquettes relatives aux mois a 30 jours et stocker cette derniere valeur 
dans une variable specifique. 

5. Pour l'etiquette relative au mois de fevrier, tester la valeur de l'annee pour savoir si 
celle qui est concernee est bissextile ou non. Une annee est bissextile tous les 
quatre ans, sauf lorsque le millenaire est divisible par 100 et non pas par 400. En 
d'autres termes, pour qu'une annee soit bissextile, il suffit que l'annee soit un nombre 
divisible par quatre et non divisible par 100 ou alors par 400. Dans tous les autres cas, 
l'annee n'est pas bissextile. 

6. Afficher le resultat par l'intermediaire d'un objet compose de 3 zones d'affichage 
comme le montre la figure ci apres. 



Figure 4-10 

Affichage du nom- 
bre de jours d'un 
mois et d'une annee 
donnes 




Soisir le mois et 
l'<mne> 




Remarque 

Vous pouvez transformer le symbole ScoreFinalClp cree au cours de I'exercice 4-1 en modifiant les 
titres et labels des champs. 



7. Pour revenir a la fenetre de saisie du mois et de l'annee, creer un gestionnaire 
d'evenement sur l'objet correspondant a la zone d'affichage des resultats. Ce gestion- 
naire detruit la zone d'affichage lorsque l'utilisateur clique dessus. 
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Le projet mini site 

L'objectif est d'ameliorer les programmes realises a la fin du chapitre 3, « Communiquer 
ou interagir », en utilisant les concepts developpes au cours de ce chapitre. Nous vous 
proposons de perfectionner les transitions d'affichage entre les rubriques et les pages 
lorsque l'utilisateur clique sur le titre ou une rubrique. 



Se deplacer en douceur 



Extension web 

Pour vous faciliterla tache, la miseen place des objets proposes dans cetexercice estdefinle dans le fichier 
SeDeplacerEnDouceur.fla situe dans le repertoire Projet/SupportPourRealiserLesExercices/ 
Chapitre4. Dans ce meme repertoire, vous pouvez accedera I'application telle que nous souhaitons la 
voirfonctionner(SeDeplacerEnDouceur.swf) une fois realisee. 



L'affichage des rubriques ou encore le passage d'une page a un autre, peuvent etre 
ameliores en deplacant les objets pour rendre l'effet de transition plus agreable a l'ceil. 
Avant de realiser ses transitions sur les objets propres au mini site, examinons comment 
deplacer un objet en donnant une impression de vitesse et de douceur. 

Dans ce chapitre, les deplacements d'objets ont tous ete realises par incrementation d'une 
variable vi tesse de valeur constante. Pour donner le sentiment qu'un objet se deplace tout en 
ralentissant lorsqu'il s'approche de sa position finale, nous devons faire varier la vitesse de 
deplacement en fonction de la position de l'objet par rapport a sa destination. 



Figure 4-11 

Plus le carre 
s 'approche de sa 
position finale, plus 
sa vitesse diminue. 
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Pour deplacer un objet horizontalement, d'un point A vers un point B, en faisant varier la 
vitesse au fur et a mesure du deplacement, ralgorithme est le suivant (voir figure 4-11) : 

• Placer l'objet en A 
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• Calculer et memoriser la distance entre le point B et le point A, dans une variable 
nominee ecart. 

• Le depl acement de l'objet est obtenu en divisant ecart par 6. 

• Mettre a jour la position courante de l'objet, pour le deplacer. 

• Calculer 1' ecart entre l'objet depl ace et le point B. Cet ecart est plus faible que le prece- 
dent (voir figure 4-11). 

• Calculer le depl acement en divisant ecart par 6. Le depl acement est egalement plus 
faible que le precedent. 

• Mettre a jour la position courante de l'objet, pour le deplacer. 

• Repeter ces operations tant que le depl acement de l'objet est plus grand que 0.4 pixel. 



Remarque 

Le choix des valeurs 6 et 0.4 est intuitif, il permet de realiser un deplacement relativement harmonieux, 
tout en evitant d'effectuer trap de calculs. Si vous divisez I'ecart par une valeur plus grande, le deplace- 
ment sera plus lent. De la meme facon, si vous augmentez la precision du testde fin de repetition, beau- 
coup de calculs seront effectues pour des deplacements imperceptibles. 



Pour traduire cet algorithme en ActionScript vous devez, apres examen du code source 
SeDepl acerEnDouceur.fi a, faire en sorte que : 

• L'objet carre soit a l'ecoute de l'evenement Event. ENTER_FRAME. A chaque emission de 
cet evenement Taction seDeplacerVers( ) est appelee. 

• Lafonction seDeplacerVers( ) definisse les elements ecart, depl acement et positionCourante. 

• La positionCourante soit mise a jour en utilisant l'expression positionCourante = 
carre. x. 

• Les calculs de I'ecart et du deplacement soient effectues des que la positionCourante 
est connue. 

• Le carre prenne sa nouvelle position grace a l'expression carre. x = positionCourante 
+ deplacement. 

• Si le depl acement est inferieur a 0.4 en valeur absolue, l'objet carre ne doit plus etre en 
mesure de recevoir l'evenement Event. ENTER_FRAME. Positionnez alors le carre a sa 
position finale. 



Remarque 

Pourqu'un objetne puisse plus recevoir un evenement parrJculier, ilsuffitde detruire le gestionnaire de cet 
evenement en utilisant la methode removeEventl_istener( ). Cette derniere pend en parametre le nom 
de l'evenement ainsi que I'action a detruire. Par exemple, ici, pour stopper definitivement le carre, nous 
devons ecrire I'instruction : 

carre. remove Event Li stener( Event . ENTER_FRAME, seDepl acerVers) ; 



Verifiez le bon fonctionnement du code en 1' executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 
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Deplacer les rubriques 

Maintenant que nous savons deplacer un petit carre sur l'axe des X, nous allons ameliorer 
la page d'accueil du mini site en deplacant les rubriques de facon aleatoire, jusqu'a leur 
position finale. 



Extension web 

Pourvous faciliter la tache, la mise en place des objets proposes dans cetexercice estdefinie dans le fichier 
DeplacerllneRubrique.fla situe dans le repertoire Projet/SupportPourReal iserLesExercices/ 
Chapitre4. Dans ce meme repertoire, vous pouvez accedera I'application telle que nous souhaitons la 
voir fonctionner(DeplacerUneRubr1 que. swf) une fois realisee. 



A cette etape du livre, nous n'avons pas encore en main tous les outils necessaires pour 
repeter les traitements sur des objets ayant un meme comportement. Sans ces outils nous 
devons realiser des copier/coller d' instructions et modifier les noms des objets (rubri- 
ques, pages. . .) concernes par le traitement. La tache est relativement simple mais longue 
et fastidieuse. C'est pourquoi nous allons restreindre nos ambitions a ne deplacer que la 
rubrique Animes du site. 

ds= Pour en savoir plus 

La realisation des animations pourtoutes les rubriques ettoutes les pages esttraitee a la fin du chapitre 7, 
« Collectionner des objets ». 

A I'affichage de la page Accueil 

Pour realiser le deplacement de la rubrique Animes, la demarche est la suivante : 

• Positionner au hasard sur la scene la rubrique Animes. Les valeurs tirees au hasard sont 
comprises entre -1 argeurRubrique et 1 argeurScene + 1 argeurRubrique pour l'axe des X 
et -hauteur Rubrique et hauteurScene + hauteur Rubrique pour l'axe des Y. 

• Memoriser la position finale de la rubrique dans les variables finalXRubriqueAnimes et 
finalYRubriqueAnimes. 

• Ajouter l'ecouteur d'evenement Event. ENTER_FRAME al'objet rubriqueAnimes. 

• Transformer Taction seDepl acerVers ( ) de l'exercice precedent de facon a ce que l'objet 
a deplacer ne soit plus le carre mais la rubriqueAnimes. 



Remarque 

Au lieu de remplacer carre par rubriqueAnimes, nous vous conseillons d'utiliser la propriete 
currentTarget etudiee au cours de la section « Le projet mini site » du chapitre precedent. 



• Dans la fonction seDeplacerVers( ), faites en sorte que le deplacement s'effectue a la 
fois sur l'axe des X et sur l'axe des Y. A cette fin, vous pouvez definir des variables 
ecartX, ecartY, depl acementX, deplacementY... 

• Arreter le deplacement de la rubrique lorsque les deplacements en X et en Y sont infe- 
rieurs a 0 .4, en valeur absolue. 

• Verifiez le bon fonctionnement du code en 1' executant a l'aide des touches 
Ctrl + Entree (PC) ou Cmd + Entree (Mac). 
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Lors d'un die sur le titre 

Lorsque l'utilisateur clique sur le titre du site, la page Accueil reapparait en affichant le 
emplacement des rubriques. Modifier Taction cl icSurTitre( ) de facon a : 

• Calculer une nouvelle position tiree au hasard pour rubriqueAnimes. 

• Ajouteranouveaul'ecouteurd'evenement Event. ENTER_FRAME a la l'objet rubriqueAnimes. 



Remarque 

Pour rendre ('apparition des rubriques plus reelles, vous pouvez initialiser la propriete alpha de la 
rubriqueAnimes a 0, lors de la creation de la rubrique. La propriete augmente ensuite en meme temps 
que la rubrique se deplace. Cette meme propriete doit etre re in itia lisee a o, dans la definition de I'action 
cl i cSurTi tre( ). 



Afficher la page Animes 

Comme il est precise dans le cahier des charges du projet, le passage d'une page a 1' autre 
du site s'effectue a l'aide d'une transition qui rend la visite du site plus agreable. 

Ainsi, lorsque l'utilisateur clique sur une des rubriques de la page Accueil, la page asso- 
ciee s'affiche tout d'abord sur une ligne dont la couleur correspond a celle de la rubrique. 
La ligne s'epaissit ensuite pour devenir une zone rectangulaire dont la taille correspond 
aux limites de la scene. 



Extension web 

Pour vous faciliter la tache, la mise en place des objets proposes dans cet exercice est definie dans le 
fichierAfficherUnePage.fi a situe dans le repertoire Projet/SupportPourReal iserLesExercices/ 
Chapitre4. Dans ce meme repertoire, vous pouvez acceder a I'application telle que nous souhaitons 
la voirfonctionner (AfficherUnePage.swf) une fois realisee. 



Pour realiser cette animation, nous allons a nouveau utiliser la methode de deplacement 
en douceur, presentee en debut de section. La technique est la suivante : 

Apres avoir cree la pageAnimes : 

• Reduisez sa taille de 99 %t et deplacez-la au centre de la scene. 

• Modifiez la propriete al pha arm de la rendre totalement transparente. 

Lorsque l'utilisateur clique sur la rubrique Animes, la transition est amorcee. Pour cela : 

• Ajoutez l'ecouteur d'evenement MouseEvent.MOUSEJJP a l'objet rubriqueAnimes de facon 
a rendre invisible la rubrique et a lancer l'animation de la pageAnimes. Lanimation 
commence lorsque la pageAnimes ecoute l'evenement Event. ENTER_FRAME. Laction a 
mener est appelee agrandi rPageAnimesEnX( ). 

• Transformez la fonction seDeplacerVers( ) en la renommant agrandi rPageAnimesEnX( ). 
A l'interieur de la nouvelle fonction agrandi rPageAnimesEnXt ) : 

• Faites en sorte de ne deplacer l'objet que sur l'axe des X. 

• Augmentez la largeur de l'objet en incrementant la propriete wi dth de 40 pixels. 

• Augmentez la transparence en incrementant la propriete alphade 0.05 point. 
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• Lorsque le emplacement devient inferieur a 0 . 4 en valeur absolue : 

- Arretez l'ecoute du gestionnaire d'evenement Event. ENTER_FRAME a l'aide de la 
methode removeEventListener( ). 

- Initialisez les proprietes alpha et width, afin de remettre l'objet a son opacite et sa 
largeur naturelle. 

- Ajoutez un nouvel ecouteur d'evenement Event . ENTER_FRAME. L' action a mener est 
maintenant appelee agrandi rPageAnimesEnY( ). 

Recopiez la fonction agrandi rPageAnimesEnX( ) en la renommant agrandi rPageAnimesEnYt ). 
A l'interieur de cette nouvelle fonction : 

• Faites en sorte de ne deplacer l'objet que sur l'axe des Y. 

• Augmentez la hauteur de l'objet en incrementant la propriete hei ght de 25 pixels ; 

• Lorsque le deplacement devient inferieur a 0 . 4 en valeur absolue : 

- Arretez l'ecoute du gestionnaire d'evenement Event. ENTER_FRAME. 

- Initialisez les proprietes x, y et height, afin de remettre l'objet sa position et sa 
hauteur naturelle. 

Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 

Lors d'un die sur le titre 

Lorsque l'utilisateur clique sur le titre du site, la rubrique Animes reapparait alors que la 
page associee disparait. Modifier Taction clicSurTitreO de facon a : 

• Replacer la pageAnimes a ses valeurs initiales (centree, reduite et transparente). 

• Rendre l'objet rubriqueAnimes visible. 

Verifiez le bon fonctionnement du code en l'executant a l'aide des touches Ctrl + Entree 
(PC) ou Cmd + Entree (Mac). 



5 

Faire des repetitions 



La repetition constitute l'une des notions fondamentales de la programmation. En effet, 
beaucoup de traitements informatiques sont repetitifs. Par exemple, la creation d'un 
agenda electronique necessite de saisir un nom, un prenom et un numero de telephone 
autant de fois qu'il y a de personnes dans 1' agenda. 

Dans de tels cas, la solution n'est pas d'ecrire un programme qui comporte autant 
d' instructions de saisie qu'il y a de personnes, mais de faire repeter par le programme le 
jeu d' instructions necessaires a la saisie d'une seule personne. Pour ce faire, le program- 
meur utilise des instructions specifiques, appelees « structures de repetition », ou 
« boucles », qui permettent de determiner la ou les instructions a repeter. 

Dans ce chapitre, nous aborderons la notion de repetition a partir d'un exemple image 
(voir section « Combien d'oeufs a cuire »). 

Nous etudierons ensuite les differentes structures de boucles proposees par le langage 
ActionScript (voir les sections « La boucle while », « La boucle do.. .while » et « La 
boucle for »). Pour chacune de ces structures, nous presenterons et analyserons un exem- 
ple afin d' examiner les differentes techniques de programmation associees aux structures 
repetitive s. 

Pour finir, en section « La boucle interne a Flash », nous observerons que le gestionnaire 
d'evenement Event. ENTER_FRAME peut etre considere comme une structure repetitive. 

Combien d'oeufs a cuire ? 

Pour bien comprendre la notion de repetition ou de boucle, nous allons ameliorer l'algo- 
rithme de l'oeuf poche, de sorte que le programme demande a l'utilisateur de choisir le 
nombre d'oeufs qu'il souhaite manger. Pour cela, nous reprenons uniquement les instruc- 
tions necessaires a la realisation de la cuisson de l'ceuf poche (voir chapitre 4, section 
« L'algorithme de l'ceuf a la coque ou poche »). 



1 . Prendre 1 "(Euf . 

2. Prendre le sel et le verser dans l'eau. 
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3. Prendre le vinaigre et le verser dans l'eau. 

4. Casser 1 'ceuf . 

5. Placer l'ffiuf dans la casserole. 

6. Faire cuire. 

7. Prendre une assiette. 

8. Poser 1 'assiette sur la table. 

9. Poser 1 '<BUf dans 1 'assiette. 

L' execution de ce bloc d' instructions nous permet de cuire un seul ceuf. Si nous desirons 
en cuire plusieurs, nous devons executer les instructions 1 et 4 autant de fois que nous 
souhaitons cuire d'oeufs. Observons que, dans ce bloc, aucune autre instruction n'est 
a repeter, sous peine de trop saler l'eau de cuisson ou d'y verser trop de vinaigre. 
La marche a suivre devient des lors : 

1. Prendre le sel et le verser dans l'eau. 

2. Prendre le vinaigre et le verser dans l'eau. 
Debut repeter : 

1 . Prendre 1 'cuf . 

2. Casser 1 'auf . 

3. Placer 1 'teuf dans la casserole 

4. Poser la question : "Souhaitez-vous un autre suf ?" 

5. Attendre la reponse. 

Tant que la reponse est OUI, retourner a Debut repeter. 

3. Faire cuire. 

4. Prendre une assiette. 

5. Poser 1 'assiette sur la table. 

6. Poser 1 'o»uf dans 1 'assiette 

Analysons les resultats possibles de cette nouvelle marche a suivre : 

Dans tous les cas, nous prenons le sel et le vinaigre. 

Ensuite, nous entrons sans condition dans une structure de repetition. 

Nous prenons et cassons un ceuf, quelle que soit la suite des operations. De cette facon, si 
la boucle n'est executee qu'une seule fois, un ceuf est quand meme prepare. 

Puis, le programme nous demande si nous souhaitons un nouvel ceuf a cuire. 

Si notre reponse est oui, le programme retourne au debut de la structure repetitive PI acer 
l'<euf dans la casserol e et demande de nouveau si nous souhaitons un ceuf, etc. 

Si la reponse est negative, la repetition s'arrete, la cuisson des ceufs commence alors. 



Remarque 

• Pour ecrire une boucle, il est necessaire de determiner ou se trouve le debut de la boucle etou se situe 
la fin (Debut repeter et Tant que pour notre exemple). 

• La sortie de la structure repetitive est soumise a la realisation ou non d'une condition (la reponse 
fournie est-elle affirmative ou non ?). 

• Le resultat du test de sortie de boucle est modifiable par une instruction placee a I'interieur de la boucle 
(la valeur de la reponse est modifiee par I'instruction 5. Attendre la reponse). 
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Question 

Que se passe-t-il si Ton place les instructions : 

4. Prendre une assiette. 

5. Poser 1 'assiette sur la table. 

a I'interieur de la structure de repetition : 
Debut repeter : 

Tant que la reponse est OU I , retourner a Debut repeter. 

Reponse 

L'instruction est repetee autantde fois que I'on souhaite d'ceufs. II y aura autantd'assiettes posees sur la 
table que d'ceufs cuits. 



Dans le langage informatique, la construction d'une repetition, ou boucle, suit le meme 
modele. Dans le langage ActionScript, il existe trois types de boucles appelees boucles 
« ordinaires » et decrites par les constructions suivantes : 

while Tant que 

do. ..while Faire... tant que 

for Pour 

Dans la suite de ce chapitre, nous allons, pour chacune de ces boucles : 

• Etudier la syntaxe. 

• Analyser les principes de fonctionnement. 

• Donner un exemple qui introduit aux concepts fondamentaux de la programmation 
graphique, a savoir calculer automatiquement la position d'un objet sur une ligne et/ou 
une colonne. 



La boucle while 

La boucle while est une structure repetitive dont les instructions sont executees apres avoir 
teste la condition d' execution de la boucle. Avec la boucle while, la decision de commen- 
cer ou de poursuivre la repetition s'effectue en debut de boucle. Pour construire une telle 
structure, il est necessaire de suivre les regies de syntaxe decrites ci-apres. 

Syntaxe 

La boucle while s'ecrit de deux facons differentes en fonction du nombre d' instructions 
qu'elle comprend. Dans le cas oil une seule instruction doit etre repetee, la boucle s'ecrit : 

while (expression conditionnelle) 
une seule instruction; 

Si la boucle est composee d'au moins deux instructions, celles-ci sont encadrees par des 
accolades, ouvrante et fermante, de facon a determiner ou debute et se termine la boucle. 

while (expression conditionnelle) 
{ 

plusieurs instructions; 

} 
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Principes de fonctionnement 

Le terme while se traduit par tant que. La structure repetitive s'execute selon les principes 
suivants : 

• Tant que 1' expression a l'interieur des parentheses reste vraie, la ou les instructions 
composant la boucle sont executees. 

• Le programme sort de la boucle des que l'expression a l'interieur des parentheses 
devient fausse. 

Une instruction est placee a l'interieur de la boucle pour modifier le resultat du test a 
l'entree de la boucle, de facon a stopper les repetitions. 

Si l'expression a l'interieur des parentheses est fausse des le depart, les instructions ne 
sont jamais executees. 

Observons qu'il n'y a pas de point-virgule a la fin de l'instruction while (expression). 

Un exemple simple 

Examinons le fonctionnement de la boucle whi 1 e sur un exemple tres simple. Les instructions 
sont les suivantes : 

var i mint = 5; 
while (i < 10) { 

trace( "Boucl e n' "+ i ) ; 

} 

Une boucle sans fin 

D'un point de vue syntaxique, le bloc d' instructions precedent est correct. Cependant, 
lors de son execution, le programme ne fonctionne pas reellement comme nous le souhai- 
terions. En effet, la fenetre de sortie a du mal a s'afficher et il est difficile de quitter 
correctement le programme. Au bout d'un certain temps, un message peut apparaitre 
dans la fenetre de sortie indiquant que « la duree d' execution d'un script excede le delai 
par defaut ». 

Que se passe-t-il ? 

La variable i est declaree et initialisee a 5. Ensuite, le lecteur Flash verifie que i est bien 
inferieur a 10, avant d'entrer dans le bloc d' instructions de la boucle whi 1 e. La variable i 
vaut 5, le resultat du test (i < 10) est done vrai, la fenetre de sortie affiche le commentaire 
Boucle n'5. 

Cela fait, le lecteur Flash remonte en debut de boucle, verifie a nouveau que i est bien 
inferieur a 10. Puisque cela est vrai (i ne change pas de valeur), la fenetre de sortie affiche 
a nouveau le commentaire Boucle n " 5. 

Le lecteur Flash retourne alors en debut de boucle et comme i n'a toujours pas change de 
valeur, le test reste vrai et la commande trace( ) est encore executee. 

Est-il besoin de continuer 1' execution de ce programme ? Le programme tourne sans fin 
et est condamne a afficher eternellement Boucle n'5. Dans cette situation, on dit alors que 
le programme « boucle ». 
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Comment faire pour sortir de cette boucle sans fin ? 

Nous devons placer, a l'interieur de la boucle, une instruction qui modifie la valeur de i, 
de facon a ce que le test (i < 10) devienne a un moment donne faux, et que le programme 
puisse enfin sortir de la boucle. 

Comment etre sur de sortir d'une boucle ? 

Ainsi, partant de 5, i doit progressivement devenir plus grand que 10. Pour cela, nous 
devons incrementer la variable i, en inserant par exemple 1' instruction i++ comme suit : 

var i :uint = 5; 
while (i < 10) { 

trace( "Boucl e n' "+ i ) ; 

i++; 

} 

L'instruction i++ est inseree en fin de boucle, de facon a afficher sa valeur avant qu'elle 
ne soit incrementee. Lorsque le lecteur Flash parcourt la boucle, il execute la commande 
trace ( ), puis il augmente la variable i de 1. 

A chaque tour de boucle, la valeur de i est ainsi modifiee. A la fin de la premiere itera- 
tion, i vaut 6. Ensuite, i prend les valeurs 7, 8, 9 et 10. Les messages Boucle n'5, Boucle 
n*6, Boucle n'7... apparaissent dans la fenetre de sortie. Lorsque i prend la valeur 10, le 
test (i < 10) devient faux. La boucle cesse done d'etre executee. 



Question 

Que se passe-t-il si, dans I'exemple precedent, la variable i est initia lisee a 10 au lieu de 5 ? 
Response 

Lorsque le lecteur Flash verifie si 1 est bien inferieur a 10 pour entrer dans la boucle while, le resultatdu 
test {i < 10) est faux. Le programme ne peut entrer dans la boucle etles instructions placees a l'interieur 
ne sont done pas executees. La fenetre de sortie ne s'affiche pas. 



L'instruction i++ est done une instruction fondamentale pour le bon deroulement de la 
boucle. C'est elle qui permet de compter les tours de boucle et de faire que la repetition 
s'arrete au bout d'un certain nombre de tours. 



Remarque 

La variable i est appelee « compteurde boucles ». Traditionnellement, en programmation, les lettres i, j 
et k sont utilisees pour representor une variable compteur. 



La variable i prend done un ensemble de valeurs successives, previsibles et determinees 
par la valeur initiale fournie au moment de sa declaration et son pas d' incrementation. 
Cet ensemble de valeurs peut etre utilise pour creer, par exemple, des clips de facon 
systematique. 

ds= Pour en savoir plus 

Le pas decrementation est defini a la section « La boucle for », a la fin de ce chapitre. 
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Automatiser la creation d 'occurrences 



En effet, jusqu'a present, pour creer plusieurs occurrences d'un meme symbole, nous 
devions ecrire la suite d' instructions : 



var photol 

var photo2 

var photo3 

var photo4 

var photo5 

var photo6 

var photo7 

var photo8 

var photo9 



PhotoClp = new PhotoClp( 

PhotoClp = new PhotoClp( 

PhotoClp = new PhotoClp( 

PhotoClp = new PhotoClpt 

PhotoClp = new PhotoClpt 

PhotoClp = new PhotoClpt 

PhotoClp = new PhotoClpt 

PhotoClp = new PhotoClpt 

PhotoClp = new PhotoClpt 



qui a pour resultat de creer 9 occurrences du symbole PhotoClp, ayant pour nom photol, 
photo2, . . ., photo9. 

Meme si cette sequence d' instructions est syntaxiquement correcte, il n'est pas tres prati- 
que de l'ecrire ainsi. II est en effet beaucoup plus simple de creer ces memes occurrences 
a l'aide d'une boucle, comme suit : 

var i mint = 1; 
var tmp:PhotoClp; 
while (i < 10) { 

tmp = new PhotoCl p( ) ; 
addChildttmp) ; 
i++; 

} 

Pour mieux comprendre en pratique le deroulement de cette boucle, examinons revolution 
des variables en l'executant pas a pas. 



Extension web 

Vous trouverez cetexemple dans le fichier PhotoWhile.fla, sous le repertoire Exemples/chapitre5. 



Tableau 5-1 Evolutions pas a pas des variables lors de l execution 



Instructions 




Explication 


var i : uint = 1 ; 
var tmp:PhotoClp 


1 


Initialisation 


while (i < 10) { 




i est inferieur a 10. On entre dans la boucle. 


tmp = new PhotoCl p( ) ; 
addChi 1 d(tmp) 


1 


Une premiere occurrence estcreee etenregistree dans I'objet tmp. 
tmp estajoute a la liste d'affichage au niveau 0. 




2 


i estincremente de 1. 


T~ 


2 


Fin de boucle. Le programme retourne en debut de boucle. 


while (i < 10) { 


2 


i est inferieur a 10. On entre dans la boucle. 


tmp = new PhotoCl p( ) ; 
addChildttmp) 


2 


Une secondre occurrence estcreee etenregistree dans I'objet tmp. 
tmp estajoute a la liste d'affichage au niveau 1. 




3 


i estincremente de 1. 




} 


3 


Fin de boucle. Le programme retourne en debut de boucle. 


while (i < 10) { 


3 


i est inferieur a 10. On entre dans la boucle. 
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Tableau 5-1 Evolutions pas a pas des variables lors de I'execution (suite) 



Instructions 


i 


Explication 


tmp = new PhotoCl p( ) ; 
addChild(tmp) ; 


3 


Une troisieme occurrence estcreee etenregistree dans I'objet tmp. 
tmp estajoute a la liste d'affichage au niveau 2. 




4 


i est incremente de 1. 


s 


A 
H 


Fin de boucle. Le programme retourne en debut de boucle. 


whilp (i < 101 f 


A 


i est inferieur a 10. On entre dans la boucle. 




4 

5 

0 

7 
8 


Les occurrences 4, 5, 6, 7 et 8 sont creees de la mime facon, i 
etant incremente de 1 a chaque tour de boucle. 




9 


i est incremente de 1 


tmp = new PhotoCl p( ) ; 
addChild(tmp) 


y 


lino npiivipmo nrn irronrci act rraaa nf onron ic traa Hp nc I'nhiof tmn 

U 1 It IICUVICIMC ULL Ul 1 CI ILc Cb L L 1 CCC CLClllcyibLICC Ud 1 lb 1 UUJtL Lllip. 

tmp estajoute a la liste d'affichage au niveau 8. 




10 


i est incremente de 1 


} 


10 


Fin de boucle. Le programme retourne en debut de boucle. 


while (i < 10) ( 


10 


i estsuperieura 10, le programme n'entre pas dans la boucle. 


Ainsi, grace a la boucle whi 1 e, 


nous 


avons cree et place dans la liste d'affichage 9 occur- 



rences de type PhotoCl p, par programme, sans avoir a copier-coller, puis modifier a 
chaque fois la meme instruction. 

Les occurrences sont placees, par defaut, a l'origine de la scene comme le montre la 
figure 5-1. En effet, aucune instruction ne modifie les proprietes x et y de chacune des 
occurrences creees. 

ds= Pour en savoir plus 

Les notions de niveau et de liste d'affichage sont etudiees au chapitre 2, « Les symboles », section « La 
gestion de la liste d'affichage ». 

La manipulation des occurrences creees de facon automatique est expliquee a la section « La boucle 
do... while » ci-apres. 




Les occurrences du 
symbols PhotoClp 
sont creees avec lo 
boucle while 
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Remarque 

Observons qu'en utilisantune structure repetitive, il devient tres facile de creer 100 occurrences en modi- 
fiant simplement le test (i < 5) par (i < 100). Imaginez combien il aurait ete fastidieux de creer les 
100 occurrences en ecrivant les 100 appels a I'operateur new ! 



La boucle do. ..while 

Le langage ActionScript propose une autre structure repetitive, analogue a la boucle 
while, mais dont les instructions sont executees avant meme d' avoir teste la condition 
d'execution de la boucle. II s'agit de la boucle do...whi 1 e. 

Syntaxe 

La boucle do...while se traduit par les termes fa1re...tant que. Cette structure s'ecrit de 
deux facons differentes en fonction du nombre d' instructions qu'elle comprend. 

Dans le cas oil une seule instruction doit etre repetee, la boucle s'ecrit de la facon 
suivante : 

do 

une seule instruction; 
while (expression condi tionnel 1 e) ; 

Si la boucle est composee d'au moins deux instructions, celles-ci sont encadrees par des 
accolades, ouvrante et fermante, de facon a determiner oil commence et se termine la 
boucle. 

do { 

plusieurs instructions; 
} while (expression conditionnelle) ; 

Principes de fonctionnement 

Ainsi decrite, la boucle do...whi 1 e s'execute selon les principes suivants : 

• Les instructions situees a l'interieur de la boucle sont executees tant que l'expression 
conditionnelle placee entre parentheses ( ) est vraie. 

• Les instructions sont executees au moins une fois, puisque l'expression conditionnelle 
est examinee en fin de boucle, apres execution des instructions. 

Si la condition mentionnee entre parentheses reste toujours vraie, les instructions de la 
boucle sont repetees a l'infini. On dit que le programme « boucle ». 

Une instruction modifiant le resultat du test de sortie de boucle est placee a l'interieur de 
la boucle, de fagon a stopper les repetitions au moment souhaite. 

Observons qu'un point-virgule est place a la fin de l'instruction whi 1 e (expression) ; . 

Une nuit etoilee 

Lobjectif de cet exemple est double : apprendre a construire une boucle do...while et 
etudier comment manipuler les objets crees a la volee (dynamiquement, en cours 
d'execution du programme). 
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Pour cela, nous vous proposons de dessiner un ciel rempli d' etoiles scintillantes comme 
le montre la figure 5-2. 



Cahier des charges 

Toutes les etoiles sont issues du meme symbole nomme AnimStarClp. Ce symbole est de 
type MovieClip. II contient 40 images construites a l'aide d'interpolations modifiant la 
taille et la transparence de l'etoile et faisant apparaitre l'etoile scintillante. 



Extension web 

Vous pourrez examiner le symbole AnimStarClp dans le fichier EtoileDoWhile.fi a, sous le repertoire 
Exemples/chapitre5. 



Les etoiles sont au nombre de 20. Elles sont placees au hasard sur la moitie superieure de 
la scene. Elles sont de tailles inegales et leur scintillement n'est pas synchronise. 

Creer 20 etoiles avec la boucle do... while 

La creation des 20 etoiles s'effectue a l'aide d'une boucle dc.while, comme le montrent 
les instructions suivantes : 

//© Definition du compteur et de l'objet cetteEtoile 

var i :uint = 0; 

var cetteEtoile:AnimStarClp ; 

//© Debut de la boucle do... while 

do { 

//© Creer une etoile 
cetteEtoile = new AnimStarCl p( ) ; 
//© Passer a 1 'occurrence suivante 
i++; 

//© Test de fin de boucle 
Iwhile (1 < 20); 

Le fonctionnement de la boucle do...while est tres proche de celui de la boucle while. 
Apres avoir cree et initialise i a 0 (O), le lecteur Flash entre dans la boucle do...whi 1 e, sans 
test prealable (©). II cree alors une premiere etoile grace a l'operateur new (©). La varia- 
ble i est ensuite incremented de 1 (1++, ©). Le programme arrive en fin de boucle et veri- 
fie si i est inferieur a 20 (while (i < 20), ©). Puisque i vaut 1, le test est vrai et le 
programme remonte en debut de boucle (do, ©) pour creer un nouveau symbole (©), 
incrementer i de 1 (©)... 



Figure 5-2 




Un ciel compose de 
20 etoiles issues du 
meme symbole. 
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Lorsque i vaut 19, 20 etoiles ont ete creees. Le compteur i est a nouveau increments 
de 1 (O) et prend la valeur 20. Le test de fin de boucle s'avere alors faux (©). Le 
programme sort alors de la boucle. 

A Tissue de la boucle, les etoiles sont creees et placees par defaut a l'origine de la scene. 
Pour simuler une nuit etoilee, nous devons les placer au hasard sur la moitie superieure 
de la scene. Pour cela, nous avons a modifier les proprietes x et y de chacune des etoiles 
creees par l'operateur new. 

Placer les etoiles au hasard 

Placons maintenant les etoiles au hasard sur la scene. Pour cela, nous utilisons la 
methode Math . random( ). Les etoiles sont placees sur toute la largeur de la scene et sur sa 
moitie superieure grace aux instructions suivantes : 

var largeur:uint = stage. stageWidth; 
var hauteur :uint = stage. stageHeight; 
cetteEtoile.x = Math . random( )*largeur; 
cetteEtoile.y = Math . randomt )*hauteur/2; 

Les deux dernieres instructions sont inserees dans la boucle do...whi 1 e, juste apres la creation 
des objets, par l'operateur new. 

ks° Pour en savoir plus 

Le positionnementd'un objet sur la scene ainsi que la methode Math, randomt ) sontetudies plus precisement 
au chapitre 4, « Faire des choix », section « Exemple, le jeu de bulles ». 

L' objet cetteEtoile represente, a chaque tour de boucle, l'etoile courante. Le position- 
nement des etoiles s'effectue en modifiant les proprietes x et y de chacune des etoiles a 
partir d'une valeur calculee au hasard. 

Modifier la taille des etoiles 

Les etoiles ne sont pas toutes de la meme taille. Nous devons effectuer un changement 
d'echelle variable. Pour respecter la forme du symbole, le changement d'echelle doit etre 
identique tant en largeur qu'en hauteur. Pour cela, nous tirons au hasard une seule valeur 
de changement d'echelle et nous appliquons ce meme coefficient (compris entre 0.1 et 
0.6) sur les deux proprietes seal eX et seal eY comme suit : 

var taille: Number; 
taille = Math.random()*0.5 + 0.1; 
cetteEtoile. scileX = taille; 
cetteEtoile. xscaleY = taille; 

Ces instructions sont placees a l'interieur de la boucle do...whi 1 e, juste apres le positionne- 
ment des objets. L'instruction de declaration de la variable tai 1 1 e est placee en dehors de 
la boucle. 

Faire scintiller les etoiles 

Si vous lancez 1' animation a ce stade des operations, vous constaterez que les etoiles se 
trouvent bien dans la moitie superieure de la scene et qu'elles ont toutes une taille diffe- 
rente. Cependant un detail choque : elles scintillent toutes de facon tres synchronised ! 

En effet, lorsque 1' animation est lancee, chaque clip joue sa propre animation a partir de 
la premiere image du clip, en utilisant la meme cadence d'affichage. Pour differencier la 
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synchronisation des clips, nous allons lancer 1' animation de chaque clip non plus a partir 
de la l re image, mais a partir d'une image tiree au hasard. 

Le numero de 1' image a partir de laquelle le clip est anime doit correspondre a une valeur 
comprise entre 1 et le nombre d' images contenues dans le clip. L' instruction permettant 
d'obtenir une telle valeur s'ecrit : 

var debut: Number; 

debut = Math.random()*cetteEtoile.totalFrames + 1; 

Pour finir, le lancement de 1' animation d'une etoile a partir d'une image donnee est 
realise par 1' instruction suivante : 

cetteEtoile.gotoAndPl ay (Math. round (debut) ) ; 

Ces instructions sont placees a l'interieur de la boucle do...while, juste apres le change - 
ment d'echelle des etoiles. L'instruction de declaration de la variable debut est placee en 
dehors de la boucle. 

ds= Pour en savoir plus 

La propriete total Frames etla methode gotoAndPlay( ) des objets de type MovieCl ipsontetudiees au 
chapitre 2, « Les symboles », section « Proprietes etmethodes d'un objet ». 

Code complet de etoileDoWhile.fla 

L'integralite du code permettant d'obtenir une nuit etoilee s'ecrit comme suit : 

//Stocker la hauteur et la largeur de la scene 

var largeur:uint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

//Declaration des variables 

var i :uint = 0; 

var taille, debutiNumber; 

//Declaration d'un objet de type AnimStarClp 

var cetteEtoile:AnimStarClp; 

//Debut de la boucle do... while 
do { 

//Creer une etoile 

cetteEtoile = new AnimStarCl p( ) ; 

//Placer l'occurrence courante au hasard dans la moitie superieure de la scene 
cetteEtoi 1 e.x = Math.randomt )*largeur; 
cetteEtoi 1 e.y = Math.random()*hauteur/2; 

//Diminuer la taille de l'occurrence courante de 0.1 a 0.5 fois la taille initiale 
taille = Math.random()*0.5 + 0.1; 
cetteEtoile. scaleX = taille; 
cetteEtoile. scaleY = taille; 

//Faire jouer le clip a partir d'une image tiree au hasard 
debut = Math. randomt )*cetteEtoi 1 e. total Frames + 1; 
cetteEtoi 1 e.gotoAndPl ay (Math. round (debut) ) ; 
//Ne pas oublier d'ajouter chaque etoile a la liste d'affichage 
addChild(cetteEtoile); 
//Passer a l'occurrence suivante 
i++ ; 
} while (i < 20); 
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Question 

Que se passe-t-il si Ton remplace les instructions : 
var i mint = 0; 

I do { 
//Creation des etoiles 
} while (i < 20); 

par : 

var i mint = 0; 

do { 

//Creation des etoiles 
} while (i < 0); 

Reponse 

La variable i estdeclaree etinitialisee a o. Dans les deux cas, les instructions placees a I'interieurde la 
boucle do...while sontexecutees puisqu'il n'y a pas de test prealable a I'entree de la boucle. Une etoile 
est done creee et placee au hasard sur la scene. En remplagant la condition (i < 20) par (i < 0), le 
test est faux des le depart. Le programme sortde la boucle. Celle-ci n'estdonc execut.ee qu'une seule 
fois. La nuit n'est etoilee que d'une seule etoile ! 



La boucle for 



L'instruction for permet d'ecrire des boucles dont on connait a l'avance le nombre 
d'iterations (de boucles) a executer. Elle est equivalente a l'instruction while mais est 
plus simple a ecrire. 



Syntaxe 

La boucle for s'ecrit, elle aussi, de deux facons differentes en fonction du nombre 
d' instructions qu'elle comprend. 

Dans le cas ou une seule instruction doit etre repetee, la boucle s'ecrit : 

for (initialisation; condition; increment) 
une seule instruction; 

Si la boucle est composee d'au moins deux instructions, celles-ci sont encadrees par deux 
accolades, ouvrante et fermante, de facon a determiner oil debute et se termine la boucle. 

for (initialisation; condition; increment) 
{ 

plusieurs instructions; 

} 

Les termes Initialisation, Condition et Increment sont des instructions separees obliga- 
toirement par des points-virgules (;). Ces instructions definissent une variable, ou indice, 
qui controle le bon deroulement de la boucle. Ainsi : 

• Initialisation permet d'initialiser la variable representant l'indice de la boucle 
(exemple : i = 0, i etant l'indice). Elle est la premiere instruction executee a I'entree 
de la boucle. 
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• Condition definit la condition a verifier pour continuer a executer la boucle (exemple : 
i < 10). Elle est examinee avant chaque tour de boucle, y compris au premier. 

• Increment est l'instruction qui permet de modifier le resultat du test precedent en 
augmentant ou diminuant la valeur de la variable testee. L'increment peut etre 
augmente ou diminue de N. N est appele le « pas d' incrementation » (exemple : 
i = i + 2). Cette instruction est executee a la fin de chaque tour de boucle. 

ds= Pour en savoir plus 

II existe une autre boucle for appelee for- in. Ce type de boucle est utilise pour examiner le contenu des 
proprietes d'un objet. Nous I'etudierons au cours du chapitre 9, « Les principes du concept "objet" », 
section « La boucle for-in ». 



Principes de fonctionnement 

Les boucles for realisent un nombre precis de boucles dependant de la valeur initiale, de 
la valeur finale et du pas decrementation. Voyons sur differents exemples comment ces 
boucles sont executees : 



Tableau 5-2 Exemples de fonctionnement de la boucle for 



Inti; 


Valeur 


Valeur 


Pas 


Nombre 


Valeurs prises 




initiale 


finale 


^incrementation 


de boucles 


par i 


for (i =0; i <5; i =i +1) 


0 


4 


1 


5 


0,1,2,3,4 


for(i=4;i<=12;i=i+2) 


4 


12 


2 


5 


4, 6,8,10, 12 


for (i =5; i >0; i =i - 1) 


5 


1 


- 1 


5 


5,4,3,2,1 



Remarques 

• Le nombre de tours est identique dans chacune de ces boucles, malgre une definition diffe rente pour 
chacune des instructions de controle. 

• L'ecriture de l'instruction increment, qui augmente ou diminue de l la variable de controle de la 
boucle, s'ecrit plus simplement i++, ou 1— . 



Le trombinoscope - 1 re version 

L'objectif de cet exemple est d'apprendre a construire des boucles for simples et imbri- 
quees ainsi que de s'initier au placement automatique des objets sur la scene. Pour cela, 
nous allons travailler a la mise en place d'un trombinoscope virtuel. Cet exemple sera 
utilise par la suite, pour aborder les notions de tableaux et de programmation objet. 

Cahier des charges 

Le trombinoscope est un tableau de vignettes representant les personnes enregistrees 
dans un agenda electronique par exemple. Ici, nous ne presentons que la partie affichage 
des photos en lignes et colonnes comme le montre la figure 5-3. 

L' affichage des photos s'effectue automatiquement, par programme, en tenant compte de 
la faille des photos (100 pixels en largeur et en hauteur). L'ecart entre les photos est constant 
et determine par le programmeur. 
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Figure 5-3 

Presentation du 
trombinoscope sous 
forme de tableau 





in 




1 






Six photos placees 
dans un quadnilage, 
avec deux boucles fo 


r 


| PhotoForlmbrique.fIa 





Les photos sont enregistrees dans un repertoire nomme Photos et se nomment respec- 
tivement MiniPhoto0.jpg, MiniPhotol.jpg... Mini Photo6.jpg. 

Les photos sont chargees en cours d'execution de 1' application et non dans la bibliotheque 
du fichier . f 1 a. 

Avant de realiser l'affichage sous la forme d'un tableau a deux lignes et trois colonnes, 
examinons tout d'abord comment placer les photos sur une seule ligne, puis sur une seule 
colonne. 

Des photos sur une ligne horizontale 

L'objectif ici est de placer, par programme, une serie de photos sur une ligne horizontale 
comme le montre la figure 5-4. 



Figure 5-4 

Les photos 
sont alignees 
en tenant compte 
de leur taille et 
d'un ecart donne. 
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Pour obtenir l'affichage des quatre photos sur une ligne horizontale placee au centre de la 
scene, nous devons utiliser, sans connaitre les structures repetitives, la serie d' instructions 
ci-apres : 

var aCharger: Loader; 

//Photo n' 0 

//Definir un support pour stocker la photo 
var unePhoto:PhotoClp; 

//Creer le chargeur et charger la photo MiniPhoto0.jpg 
aCharger = new LoaderO ; 

aCharger .load (new URLRequestt "Photos /Mini PhotoO. jpg" ) ) ; 
Creer le support qui contient la photo 
unePhoto= new PhotoClpO; 

//Placer le support sur la scene 

unePhoto.x =( unePhoto. width + ecartInterPhoto)*0 + ecartDuBord; 
unePhoto.y = (hauteur - unePhoto. height) II; 

//Ajouter la photo dans la liste d'affichage du support 
unePhoto. addChi 1 d ( aCharger ) ; 

//Ajouter le support dans la liste d'affichage de 1 'animation 
addChild(unePhoto) ; 
//Photo n - 1 

aCharger = new LoaderO ; 

aCharger . 1 oad(new URLRequestt "Photos /Mini Photoi.jpg" ) ) ; 
unePhoto= new PhotoClpO; 

unePhoto.x =( unePhoto. width + ecartInterPhoto)*i + ecartDuBord; 
unePhoto.y = (hauteur - unePhoto. height) II; 
unePhoto. addCh i 1 d ( aCharger) ; 
addChild(unePhoto) ; 

//Photo n" Z 

aCharger = new LoaderO ; 

aCharger . 1 oad(new URLRequestt "Photos /Mini Photo2.jpg" ) ) ; 
unePhoto= new PhotoClpO; 

unePhoto.x =( unePhoto. width + ecartInterPhoto)*2 + ecartDuBord; 
unePhoto.y = (hauteur - unePhoto. height) II; 
unePhoto. addChild( aCharger) ; 
addChild(unePhoto) ; 

//Photo n" 3 

aCharger = new LoaderO ; 

aCharger. load (new URLRequestt "Photos /Mini Photo3.jpg" ) ) ; 
unePhoto= new PhotoClpO; 

unePhoto.x =( unePhoto. width + ecartInterPhoto)*3 + ecartDuBord; 
unePhoto.y = (hauteur - unePhoto. height) II; 
unePhoto. addCh i 1 d ( aCharger) ; 
addChild(unePhoto) ; 

Dans cette suite d'instructions, nous avons mis volontairement en avant (en italique) la 
structure repetitive des differents elements utilises. Mais avant d'examiner plus attentive - 
ment cette structure, observons comment charger dynamiquement une photo, c'est-a-dire 
en cours d'execution de l'animation. 

Le chargement d'une photo 

Le chargement des photos « a la volee », s'effectue par 1' intermediate d'un chargeur de 
type Loader . 
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L'instruction var aCharger: Loader = new LoaderO; definit un objet nomme aCharger 
utilise dans la suite du programme pour charger les photos. L'operateur new cree un 
espace memoire pour stocker une photo chargee. 

ds= Pour en savoir plus 

Le fonctionnement de l'operateur new etson utilite sont deta illes au chapitre 8, « Classes et objets ». 

Le chargement d'une photo est realise par la methode loadO qui demande en parametre 
l'emplacement de la photo a charger. Pour cela, vous devez placer l'instruction new 
URLRequest("chemin/d'acces/auFichier/nomDuFichier. jpg" ) a l'interieur des deux paren- 
theses de la methode 1 oad( ). 

Dans notre exemple, le fichier image MiniPhoto0.jpg est a rechercher dans le repertoire 
Photos oii se trouve l'application. Une fois identifie, par 1' intermediate de la classe 
URLRequest, le fichier est charge et enregistre dans l'objet aCharger. 

Le chargement systematique de plusieurs photos 

Observez, dans notre exemple, que les noms de fichiers sont identiques, seule une valeur 
numerique representant le numero de la photo et incrementee de 1 en 1 (MiniPhotoO, 
MiniPhotol...) permet de les distinguer les unes des autres. L'instruction permettant le 
chargement de chaque photo est composee d'elements constants et d'elements variants. 
Ces derniers sont les elements numeriques variant de 0 a 3. 

La creation du chargeur de photo peut done etre traitee a l'interieur d'une boucle for, 
de la meme facon qu'en section « La boucle do... while ». Les instructions sont les 
suivantes : 

for (var i : ui nt = 0; i < 4; i++ ) { 
O aCharger = new LoaderO; 

© aCharger. 1 oad(new URLRequest("Photos/MiniPhoto"+i+" .jpg")) ; 
} 

Le nom des fichiers images possede un numero qui permet d'utiliser la methode load( ) 
de facon systematique. Chaque fichier est charge en appelant la methode URLRequest avec, 
comme chaine de caracteres, "Photos/MiniPhoto"+i+" . jpg" en parametre. De cette facon, 
a chaque tour de boucle, le nom du fichier charge differe par sa valeur numerique. 

Les instructions O et © sont repetees pour i partant de 0 jusqu'a i egal a 3. Lorsque i 
prend la valeur 4, la condition i < 4 n'est plus verifiee, le programme sort de la 
boucle. 

L'instruction O cree un nouvel emplacement memoire, pour recevoir les informations 
concernant les photos a charger. Le chargement est ensuite effectue grace a l'instruc- 
tion ©. Le fichier charge a pour nom d'acces "Photos/Mini Photo"+i+" . jpg" pour i variant 
de 0 a 3. 



Remarque 

Pour chaque nouvelle photo a charger, il convient de creer un espace memoire specifique a I'aide de 
l'operateur new. Sans cela, le chargement sulvant efface le contenu du chargement precedent, les images 
chargees utilisantalors le meme espace memoire. 
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Le positionnement en hauteur 

Une fois la photo chargee, plusieurs possibilites s'offrent a nous pour positionner les 
photos a l'ecran. La premiere et la plus simple consiste a utiliser directement les proprietes x 
et y de l'objet aCharger. 

Chaque photo doit au final se trouver a mi-hauteur de la scene. Le point de reference de 
l'objet aCharger se situe en haut et a droite de l'objet. Pour placer chaque photo a mi- 
hauteur, nous devons utiliser l'instruction : 

aCharger. y = (hauteur- aCharger. height) / 2; 

de facon a placer le centre (en y) du chargeur au centre (en y) de la scene. Or, si vous 
testez cette instruction, vous observerez que la photo n'est pas centree en hauteur. En 
realite, la propriete hei ght du chargeur n'est pas egale a la hauteur de la photo. 

Pour faire en sorte que la propriete height du chargeur corresponde exactement a la taille 
de la photo chargee, nous devons mettre en place un ecouteur d'evenement sur le char- 
geur arm de verifier si le chargement de la photo est termine. Cette technique est un peu 
complexe et pour simplifier la comprehension de cet exemple, nous choisissons d'utiliser 
une autre facon de faire (voir figure 5-4). 

La deuxieme solution consiste a creer un symbole de type clip dans lequel placer 1' image 
chargee. Le symbole, par exemple PhotoClp, est de meme taille que les photos a charger. 
Ainsi, pour placer les photos a mi-hauteur, nous utilisons les instructions : 

//Creer une occurrence laPhoto 

var laPhoto:PhotoClp = new PhotoClpO; 

//Placer 1 'occurrence laPhoto a mi-hauteur sur la scene 

laPhoto.y = (hauteur- laPhoto. height) 12; 

//Afficher le chargeur a l'interieur du clip laPhoto 

laPhoto.addChildt aCharger) ; 

//Afficher le clip laPhoto et son contenu 

addChild(laPhoto) ; 

Grace a l'instruction laPhoto. addChild(aCharger), l'objet laPhoto joue le role de conte- 
neur des photos chargees. Ainsi, pour placer la photo a mi-hauteur de la scene, il suffit de 
deplacer non plus le chargeur, mais le conteneur, c'est-a-dire laPhoto. L'objet laPhoto est 
de taille definie et fixe, l'instruction laPhoto.y = (hauteur - laPhoto. height) / 2 posi- 
tionne correctement la photo. 

Pour positionner l'ensemble des quatre photos, il suffit d'inserer ces instructions a 
l'interieur de la boucle for comme suit : 

var aCharger: Loader; 
var laPhoto:PhotoClp; 
for (var i:uint = 0; i < 4; i++) { 
aCharger = new LoaderO; 

1 aCharger .load (new URLRequest( "Photos/Mini Photo "+i+" . jpg" ) ) ; 

laPhoto = new PhotoClpO; 

laPhoto.y = (hauteur - laPhoto. height) / 2; 

laPhoto. addChild(aCharger) ; 

addChild(laPhoto) ; 

} 
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Le positionnement en largeur 

La premiere photo (nommee Photos/MiniPhotoO.jpg) est placee a ecartDuBord (soit 
O+ecartDuBord) de la scene en partant de la gauche. 

Pour placer la photo suivante (nommee Photos/Mini Photol .jpg), il suffit d'ajouter a 
ecartDuBord une fois la largeur de la photo, ainsi que la valeur ecartlnterPhoto qui 
permet d'obtenir un ecart entre les deux photos (voir figure 5-4). 

Pour placer la troisieme photo (nommee Photos/Mini Photo2.jpg), nous devons ajouter 
2 fois la largeur d'une photo (celle des deux photos precedentes) ainsi que 2 fois 
ecartlnterPhoto. 



Remarque 

II y a correspondence entre le nom de la photo et le nombre de fois que nous devons ajouter la largeur 
d'une photo et I'ecart entre deux photos. 



Ainsi, l'instruction doit etre : 

laPhoto.x = (laPhoto. width + ecartInterPhoto)*i + ecartDuBord; 

inseree dans la boucle for, juste apres avoir positionne laPhoto en y. Elle reprend cette 
concordance et place, par programme, chaque photo les unes a la suite des autres. 

Code completde photoForHorizontal.fla 



Extension web 

Vous pourrez tester cet exemple en examinable fichier PhotoForHorizontal . f 1 a, sous le repertoire 
Exemples/chapitre5. 



L'integralite du code permettant d'obtenir les photos placees sur une ligne horizontale 
s'ecrit comme suit : 

//Stocker la hauteur et la largeur de la scene 

var largeur:uint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

var ecartlnterPhotoruint = 10; 

var ecartDuBord:uint = 30; 

var laPhoto:PhotoClp; 

var aCharger:Loader; 

for (var i : ui nt = 0; i < 4; i++) { 

aCharger = new LoaderO; 

laPhoto = new PhotoClpO; 

aCharger .load (new URLRequest( "Photos/Mini Photo . jpg" ) ) ; 

laPhoto.x =(laPhoto. width + ecartInterPhoto)*i + ecartDuBord; 

tracet" x : "+ laPhoto.x + " width " + 1 aPhoto. width) ; 

laPhoto. y = (hauteur - laPhoto. height) / 2; 

traceC y : "+ laPhoto. y + " height " + laPhoto. height); 

laPhoto. addChild( aCharger); 

addChild(laPhoto) ; 

} 
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En executant cette boucle, nous obtenons le tableau d' evolution des variables ci-apres : 



Instructions 




X 


y 


Explication 


var ecartInterPhoto:uint = 10; 

var ecartDuBord:uint = 30; 

var largeur:uint = stage. stageWidth; 

var hauteur :uint = stage. stageHeight; 

var 1 aPhoto: PhotoCl p; 

var aCharger:Loader; 








Declaration et initialisation 
des constantes etdes objets. 


for (var i : u 1 n t = 0; i < 4; i++) 


0 


- 


- 


Debut de boucle. i est initia- 
lise a 0. i est inferieur a 4. On 
entre dans la boucle. 


aCharger = new LoaderO; 

laPhoto = new PhotoCl p(); 

aCharger .1 oad( new URLRequestt "Photos/ 

MiniPhntn" +i+" inn" 1 1 ■ 
niiiiriiuLU 1 I 1 . j u y lit 


o 
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reserves pour les objets 
aCharger et laPhoto. Le 
fichier MiniPhoto0.jpg 
est charge dans I'objet 
aCharger, 


laPhoto.x = (laPhoto. width + 
ecartInterPhoto)*i + ecartDuBord; 


0 


30 


■ 


x = (100 + 10) * 0 + 30 


laPhoto. y = (hauteur - 1 aPhoto. height ) / 2; 


0 


30 


100 


y = (300 - 100 ) / 2 


laPhoto. addChildt aCharger) ; 
addChild(laPhoto) ; 


0 


30 


100 


Le chargeur est affiche dans 
le conteneur 1 aPhoto, qui est 
lui-meme affiche sur la scene. 


for (var i:uint = 0; i < 4; i++) 


1 






Retouren debut de boucle, i 
est incremente de 1 . i est 
inferieur a 4. On entre a nou- 
veau dans la boucle. 


aCharger = new LoaderO; 

laPhoto = new PhotoCl p(); 

aCharger .1 oad( new URLRequestt "Photos/ 

Minn PhfTTri" + 1 + " inn" 1 ^ ■ 
niiiiriiuLU ■ i ■ -jpy 'it 


\ 






UcUA cl pa Lc b lllClllUMc bUML 

reserves pour les objets 
aCharger et laPhoto. Le 
fichier MiniPhotol.jpg 
est charge dans I'objet 
aCharger, 


laPhoto.x = (laPhoto. width + 
ecartInterPhoto)*i + ecartDuBord; 


1 


140 


■ 


x = (100 + 10) * 1 + 30 


laPhoto. y = (hauteur - 1 aPhoto. height ) / 2; 


1 


140 


100 


y = (300 - 100 ) / 2 


laPhoto. addChildt aCharger) ; 
addChild(laPhoto); 


1 


140 


100 


Le chargeur est affiche dans 
le conteneur 1 aPhoto, qui est 
lui-meme affiche sur la scene. 


for (var 1:uint = 0; i < 4; 


1 






Retouren debut de boucle, i 
est incremente de 1 . i est 
inferieur a 4. On entre a nou- 
veau dans la boucle. 


aCharger = new Loader(); 

laPhoto = new PhotoCl p(); 

aCharger .1 oad( new URLRequestt "Photos/ 

Mini Photo "+i+" . jpg" ) ) ; 


2 






Deux espaces memoire sont 
reserves pour les objets 
aCharger et laPhoto. Le 
fichier MiniPhoto2.jpg 
est charge dans I'objet 
aCharger, 


laPhoto.x = (laPhoto. width + 
ecart!nterPhoto)*i + ecartDuBord; 


2 


250 




x = (100 + 10) * 2 + 30 



200 
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Instructions 




X 


y 


Explication 


laPhoto. addChild(aCharger); 
addChild(laPhoto); 


2 


250 


100 


Le chargeur est affiche dans 
le conteneur 1 aPhoto, qui est 
lui-meme affiche sur la scene. 


for (var i:uint = 0; 1 < 4; i++) 


3 






Retour en debut de boucle, i 
est increments de 1 . i est 
inferieura 4. On entre a nou- 
veau dans la boucle. 


aCharger = new LoaderO ; 
laPhoto = new PhotoClpO; 
aCharger. loadtnew URLRequest(" Photos/ 
Mini Photo "+i+" . jpg" ) ) ; 


3 




. 


Deux espaces memoire sont 
reserves pour les objets 
aCharger et laPhoto. Le 
fichier MiniPhoto2.jpg 
est charge dans I'objet 
aCharger, 


laPhoto.x = (laPhoto. width + 
ecartInterPhoto)*i + ecartDuBord; 


3 


360 




x = (100 + 10) * 3 + 30 


laPhoto. y = (hauteur - laPhoto. height) / 2; 


3 


360 


100 


y = (300 - 100 ) / 2 


laPhoto.addChildt aCharger); 
addChild(laPhoto); 


3 


360 


100 


Le chargeur est affiche dans 
le conteneur 1 aPhoto, qui est 
lui-meme affiche sur la scene. 


for (var i:uint = 0; i < 4; i++) 


4 






Retour en debut de boucle, i 
est incremente de 1 . i est 
egal a 4. On sortde la boucle. 



Des photos sur une ligne verticale 

L'objectif ici est de placer, par programme, une serie de photos sur une ligne verticale 
comme le montre la figure 5-5. 



Figure 5-5 

Les photos sontpla- 
cees sur une ligne 
verticale centree sur 
la scene. 




La mise en place des photos sur une colonne au lieu d'une ligne utilise la meme demarche 
que celle decrite en section precedente, a savoir : 

• creation d'un chargeur ; 

• chargement du fichier Photos/MiniPhoto/.jpg (i variant de 0 a 2) ; 

• creation d'un conteneur ; 

• placement du conteneur en y ; 
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• placement du conteneur en x ; 

• affichage du chargeur dans le conteneur puis affichage du conteneur. 

La difference s'opere dans le placement le long de l'axe des Y au lieu de l'axe des X. 
Ainsi, pour que les photos se placent de haut en bas, nous devons positionner la premiere 
photo a un certain ecart du bord superieur puis aj outer, a chaque nouvelle photo a affi- 
cher, la hauteur d'une photo et un ecart donne. La formule est quasi identique a celle 
utilisee pour le placement en x (voir section precedente) et s'ecrit : 

laPhoto.y = (laPhoto. height + ecartInterPhoto)*j + ecartDuBord; 

Le placement en x est constant et situe au centre de la scene. Compte tenu du point 
d'ancrage du symbole PhotoCl p, chaque photo est positionnee a la moitie de la largeur de 
la scene moins la moitie de la largeur d'une photo. La commande est la suivante : 

laPhoto.x = (largeur - 1 aPhoto. width) / 2; 

Cette instruction est a inserer a l'interieur d'une boucle for, juste apres avoir cree les 
objets necessaires au chargement du fichier image. 

Code completde photoForVertical.fla 



Extension web 

Vous pourrez tester cet exemple en examinant le fichier PhotoForVertical . f 1 a, sous le repertoire 
Exemples/chapitre5. 



L'integralite du code permettant d'obtenir les photos placees sur une ligne verticale 
s'ecrit comme suit : 

//Stocker la hauteur et la largeur de la scene 

var largeunuint = stage. stageWidth; 

var hauteur:uint = stage. stageHeight; 

var ecartInterPhoto:uint = 10; 

var ecartDuBord:uint = 80; 

var laPhoto:PhotoClp; 

var aCharger: Loader; 

for (var j:uint = 0; j < 4; j++) { 

//Reserver un espace memoire pour charger la photo 

aCharger = new LoaderO; 

aCharger. load (new URLRequestt" Photos /Mini Photo . jpg")) ; 

//Creer une occurrence laPhoto 
laPhoto= new PhotoClpO; 

//Placer 1 'occurrence laPhoto a mi-hauteur sur la scene 

laPhoto.y = (hauteur - laPhoto. height) / 2; 

//Afficher le chargeur a l'interieur du clip laPhoto 

1 aPhoto.addChild( aCharger ) ; 

//Afficher le clip laPhoto et son contenu 

addChild(laPhoto); 

//Afficher les coordonnees et la taille de la photo dans la fenetre de sortie 

laPhoto.y =(laPhoto. height + ecartInterPhoto)*j + ecartDuBord; 

laPhoto.x = (largeur - 1 aPhoto. width) / 3; 

traceC x : "+ laPhoto.x + " width " + 1 aPhoto. width) ; 

tracet" y : "+ laPhoto.y + " height " + laPhoto. height); 

1 aPhoto. addChild( aCharger ) ; 

addChild(laPhoto) ; 

} 
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Remarque 

Pour differencier la boucle d'affichage sur I'axe des X de celle sur I'axe des Y, il est courant d'utiliser la 
variable 1 pour I'axe horizontal et j pour I'axe vertical. 



Un tableau de photos 

L'affichage des photos sous la forme d'un tableau constitue de lignes et de colonnes 
utilise les memes techniques de creation d'objets et de placements que celles etudiees au 
cours des deux sections precedentes. 

Cependant, pour placer automatiquement une photo, a la fois en x et en y, nous aurons a 
faire varier deux indices (i et j), de facon a calculer la position d'une photo pour une 
ligne et une colonne donnees. Pour cela, nous devons utiliser deux boucles imbriquees. 

Les boucles imbriquees 

On dit que deux boucles sont imbriquees lorsqu'une des deux se trouve a l'interieur de 
1' autre. Par exemple, dans le code suivant : 

for (var j : ui nt = 0; j < 2; j++ ) { 
for (var i :uint = 0; i < 3; i++ ) { 
tracer." i : " + i + " j : " +j); 

} 

} 

la boucle « i » (en gras) est placee a l'interieur de la boucle « j ». 

Pour mieux comprendre le fonctionnement des boucles imbriquees, examinons le tableau 
d'evolution des variables i et j, lorsque les deux boucles precedentes sont executees. 



Instructions 












i 


i 


Explication 


for 


(var j : ui nt 


- 0; j 


< 


2; 


j+ 


+ ) { 


0 




Debut de la boucle « j ». j est initialise a 0, j est 
inferieura 2. On entre dans la boucle « j ». 


for 


(var i :uint 


= 0; i 


< 


3; 


1+ 


+ ) { 


0 


0 


Debut de la boucle « i » . i est initialise a 0. i est 
inferieura 3. On entre dans la boucle « i ». 




trace(" i 


" + i 




H " 


j : 


" +j); 


0 


0 


Le texte i : 0 j : 0 s'affiche dans la fenetre de 
sortie. 


for 


(var i :uint 


= 0; i 


< 


3; 


1+ 


+ ) { 


0 


1 


Retourau debutde la boucle « i » , i++, i estinfe- 
rieura 3. On entre dans la boucle « i ». 




trace (" 1 


" + 1 




b " 


j : 


" +j); 


0 


1 


Le texte i : 1 j : 0 s'affiche dans la fenetre de 
sortie. 


for 


(var i :uint 


= 0; i 


< 


3; 


1+ 


+ ) { 


0 


2 


Retourau debutde la boucle « i », 1++, 1 est infe- 
rieura 3. On entre a nouveau dans la boucle « i ». 




trace(" i 


" + i 




h " 


j : 


" +j); 


0 


2 


Le texte i : 2 j : 0 s'affiche dans la fenetre de 
sortie. 


for 


(var i :uint 


= 0; i 


< 


3; 


1+ 


+ ) { 


0 


3 


Retour au debut de la boucle « i », i++, i n'est 
plus strictement inferieura 3. On sort de la boucle 

« i ». 


for 


(var j mint 


- 0; j 


< 


2; 


j+ 


+ ) { 


1 




Retour au debut de la boucle « j » , j est 
inferieur a 2. On entre a nouveau dans la boucle 

« j ». 


for 


(var i :uint 


= 0; i 


< 


3; 


1+ 


+ ) { 


1 


0 


Debut de la boucle « i ». i est initialise a 0. i est 
inferieura 3. On entre dans la boucle « i ». 
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Instructions 



Explication 



traceC i : " + i + " J : " 


_J_ 


0 


Le texte i : 0 j : 1 s'affiche dans la fenetre de 
sortie. 


for (var i : u i n t = 0; 1 < 3; i++ ) { 


l_ 


1 


nj. i ■' i j_ i i i l • "ii" 

Retouraudebutde la boucle « n », n est infe- 
rieur a 3. On entre a nouveau dans la boucle « 1 ». 


traceC 1 : " + 1 + " j : " 




1 


Le texte i : 1 j : 1 s'affiche dans la fenetre de 
sortie. 


for (var i : u i n t = 0; i < 3; i++ ) { 




2 


Retourau debutde la boucle « i », i++. i estinfe- 
rieur a 3. On entre a nouveau dans la boucle « i ». 


traceC i : " + i + " J : " 




2 


Le texte i : 2 j : 1 s'affiche dans la fenetre de 
sortie. 


for (var i:uint = 0; i < 3; i++ ) { 




3 


Retouraudebutde la boucle « i », i++, i n'estplus 
strictement inferieur a 3. On sortde la boucle « i ». 



for (var j:uint = 0; j < 2; j++ ) { 



Retouren debutde la boucle « j » , j n'est 
plus strictement inferieur a 2. On sortde la boucle 

« j ». 



Comme vous pouvez le constater sur cet exemple tres simple, la boucle « i » est execu- 
ted deux fois puisqu'elle est placee a l'interieur de la boucle « j », le compteur j variant 
de 0 a 1. Au cours de ces deux executions, le compteur i varie a chaque fois de 0 a 3. 



Remarque 

La boucle interieure (i) estexecutee dans son integrate avantde passer a I'indice suivantde la boucle 
exterieure (j). 



Placement en lignes etcolonnes 

Pour afficher le trombinoscope en lignes et colonnes, la mefhode consiste a positionner 
les photos ligne par ligne sachant que pour chaque ligne, les photos sont placees les unes 
apres les autres pour former a chaque fois une colonne. Le positionnement en x et en y 
reprend les memes calculs que ceux etudies au cours des sections « Des photos sur une 
ligne horizontale » et « Des photos sur une ligne verticale». 

Concretement, le passage de ligne a ligne s'effectue a l'aide d'une premiere boucle 
d'indice j et celui de colonne a colonne avec une seconde boucle d'indice i, imbriquee 
dans la premiere (voir figure 5-6). 



Figure 5-6 

Les photos sont 
placees en ligne 
et en colonne. 
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La marche a suivre pour realiser un tableau de photos en lignes et colonnes est done la 
suivante : 

//Pour chaque ligne 

for (var j:uint = 0; j < 2; j++ ) { 

//Pour chaque colonne 

for (var i:uint = 0; i< 3; i++ ) { 

//© Un chargeur et un conteneur 

//© Charger le fichier dans 1'objet cree a l'etape precedente 

//© Positionner le conteneur sur l'axe des X 

// a 1 'aide de 1 'indice i 

//© Positionner le conteneur sur l'axe des Y 

// a 1 'aide de 1 'indice j 

} 

) 

O La creation du chargeur aCharger et du conteneur 1 aPhoto s'effectue comme pour les 
exemples precedents en utilisant Poperateur new. 

© Examinons d'un peu plus pres le parametre de la methode URLRequest. Dans les deux 
exemples precedents, nous avions : 

aCharger .1 oad( new URLRequest ( "Photos/Mini Photo . jpg" ) ) ; 

ou encore : 

aCharger .1 oad( new URLRequest ( "Photos/Mini Photo . jpg" ) ) ; 
selon P indice utilise dans la boucle. 

Ici, nous ne pouvons utiliser ni P indice i, ni P indice j. En effet, dans chacune des deux 
boucles imbriquees, les indices varient de 0 a 1 pour j (nombre de lignes) et de 0 a 2, pour 
la boucle i (nombre de colonnes). Or, les 6 photos a afheher se nomment MiniPhotoO, 
MiniPhotol... et MiniPhoto5. Nous devons done utiliser un compteur different de i etde j, 
qui varie de 0 a 5. 

Comme la boucle interne i est executee en tout 6 fois (2 x 3), nous pouvons inserer un 
compteur specifique (compteurPhoto) a Pinterieur de la boucle i variant de 0 a 5, et creer 
de cette facon 6 occurrences dont le numero correspond a celui de P image a afficher. 
La methode pour creer et gerer ce compteur est la suivante : 

var compteurPhoto :uint=0; 

for (var j:uint = 0; j < 2; j++ ) { 
for (var i:uint = 0; i< 3; i++ ) { 
aCharger. loadtnew URLRequest("Photos/MiniPhoto"+ compteurPhoto +".jpg")); 
compteurPhoto++; 

} 

La variable compteurPhoto est initialisee a 0 au moment de sa declaration. Ensuite, lors du 
premier tour de la boucle interne (i), les valeurs du compteur compteurPhoto varient de 0 a 2 
et permettent de creer les occurrences photoO, photol et photo2. Lors de la seconde execution 
de la boucle i, compteurPhoto n'est pas reinitialisee (au contraire de Pindice i). Ses valeurs 
varient done de 2 a 5. Elles permettent ainsi de creer les occurrences photo3, photo4 et photo5. 

© Le placement selon l'axe des X reprend le meme calcul que celui decrit au cours de la 
section « Des photos sur une ligne horizontale», soit : 

laPhoto.x = (laPhoto. width + ecartInterPhoto)*i + ecartDuBordGauche; 

Lindice 1 represente ici le numero d'une colonne. Linstruction est placee dans la boucle 
interne d' indice i. 
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© Le placement selon l'axe des Y reprend le meme calcul que celui decrit au cours de la 
section « Des photos sur une ligne verticale », soit : 

laPhoto.y =(laPhoto. height + ecartInterPhoto)*j + ecartDuBordHaut; 

L'indice j represente ici le numero d'une ligne. L'instruction est egalement placee dans 
la boucle interne d'indice 1. 

Code completde PhotoForlmbrique.fla 



Extension web 

Vous pourrez tester cet exemple en examinant le fichier PhotoForlmbrique.fla, sous le repertoire 
Exemples/chapitre5. 



L'integralite du code permettant d'obtenir les photos placees en lignes et colonnes s'ecrit 
comme suit : 

//Declaration des variables 
var ecartInterPhoto:uint = 10; 
var ecartDuBordHaut:uint=100; 
var ecartDuBordGauche:uint=50; 
var compteurPhoto:uint=0; 
var cettePhoto:PhotClp; 
var aCharger: Loader ; 
for (var j:uint = 0; j < 2; j++) { 
for (var iiuint = 0; i< 3; i++) { 

aCharger = new LoaderO ; 

laPhoto = new PhotoClpO; 

aCharger . 1 oadtnew URLRequestt " . . /Photos /Mini Photo "+compteurPhoto+" . jpg" ) ) ; 
laPhoto.x =(laPhoto. width + ecartInterPhoto)*i + ecartDuBordGauche; 
traceC x : "+ laPhoto.x + " width " + 1 aPhoto. width) ; 
laPhoto.y = (laPhoto. height + ecartInterPhoto)*j + ecartDuBordHaut; 
traceC y : "+ laPhoto.y + " height " + laPhoto. height) ; 
laPhoto.addChild(aCharger) ; 
addChild(laPhoto) ; 
compteurPhoto++; 




Question 

Que se passe-t-il si Ton echange les deux boucles, en plagant la boucle j a I'interieur de la boucle 1, 
comme suit : 

for (var i:uint = 0; i< 3; i++ ) { 
for (var j:uint = 0; j < 2; j++ ) { 

//Creer deux occurrences nominees laPhoto et aCharger 
//Charger le fichier dans 1'objet cree a l'etape precedente 
//Positionner la photo sur l'axe des X a 1 'aide de l'indice i 
//Positionner la photo sur l'axe des Y a l'aide de l'indice j 

} 

} 

Reponse 

Placer la boucle j en boucle interne de la boucle i ne modifie en rien le resultat du programme. Les 
images sont affichees colonne parcolonne, sachantque pourchaque colonne les photos sont placees les 
unes sous les autres pour former les deux lignes. 
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Quelle boucle choisir ? 

Chacune des trois boucles etudiees dans ce chapitre permet de repeter un ensemble 
d'instructions. Cependant, les differentes proprietes de chacune d'entre elles font que 
le programmeur utilisera un type de boucle plutot qu'un autre, suivant le probleme a 
resoudre. 

Choisir entre une boucle do... while et une boucle while 

Les boucles do_wh1le et while se ressemblent beaucoup dans leur syntaxe, et il parait 
parfois difficile au programmeur debutant de choisir l'une plutot que 1' autre. 

Notons cependant que la difference essentielle entre ces deux boucles reside dans la 
position du test de sortie de boucle. Pour la boucle do...while, la sortie s'effectue en 
fin de boucle, alors que, pour la boucle while, la sortie se situe des l'entree de la 
boucle. 

De ce fait, la boucle do...whi 1 e est plus souple a manipuler, les instructions qui la compo- 
sent etant executees au moins une fois, quoi qu'il arrive. Pour la boucle while, il est 
necessaire de veiller a l'initialisation de la variable figurant dans le test d'entree de 
boucle, de facon a etre stir d'executer au moins une fois les instructions composant la 
boucle. 

Certains algorifhmes demandent a ne jamais repeter, sous certaines conditions, un 
ensemble d'instructions. Dans de tels cas, la structure while est preferable a la structure 
do... while. 

Choisir entre la boucle for et while 

Les boucles for et while sont equivalentes. En effet, en examinant les deux boucles du 
tableau ci-dessous : 



La boucle for 






La boucle while 


var i :uint; 






var i :uint = 0; 


for (1 = Oj 1 


<= 10; 1 


= 1+1 ) 


while (i <= 10) 


{ 
) 






{ 

i = 1+1; 








} 



nous constatons que, pour chacune d'entre elles, la boucle debute avec i = 0, puis, tant 
que i est inferieur ou egal a 10, i est increments de 1. 

Malgre cette equivalence, pour choisir entre une boucle for et une boucle whi 1 e, observons 
que : 

• La boucle for est utilisee quand on connait a l'avance le nombre d'iterations a 
executer. 

• La boucle while est employee lorsque le nombre d'iterations est laisse au choix de 
l'utilisateur du programme ou determine a partir du resultat d'un calcul realise au 
cours de la repetition. 
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La boucle interne a Flash 

Les boucles while, do_wh1le et for sont des boucles « ordinaires ». Ces structures repetitives 
existent dans la plupart des langages de programmation (C, Java, PHP. . .) et s'utilisent de 
facon courante. 

II existe, dans l'environnement Flash, un autre type de boucle que nous avons deja utilise 
sans jamais le presenter comme une structure de repetition. II s'agit de la boucle de scenario. 



La boucle de scenario 

Lorsque Ton execute une application Flash, l'animation est realisee grace au deplace- 
ment de la tete de lecture sur la ligne de temps. La tete de lecture « boucle » sur la ligne 
de temps puisque, lorsqu'elle arrive sur la derniere image, elle se place a nouveau sur la 
premiere image pour rejouer l'animation. Le deplacement continu et repete de la tete de 
lecture forme done une structure repetitive. Nous l'appelons « boucle interne a Flash » 
ou encore « boucle de scenario ». 

La principale caracteristique de la boucle interne est de permettre le rafraichissement de 
l'ecran, e'est-a-dire de remplacer une image par une autre en fonction des instructions 
placees dans le script. 

Remarque 

La vitesse de deplacement de la tete de lecture, etdonc le rafraichissement de l'ecran, est associee a la 
cadence de l'animation : e'est-a-dire le nombre d'images affichees (traitees) parseconde. 

ds= Pour en savoir plus 

Pour modifier la cadence de votre animation, reportez-vous a la section « L'environnement de programma- 
tion Flash », paragraphe « Le scenario, les caiques, les images et les images-cles » du chapitre introductif 
de cetouvrage. 

Les boucles ordinaires (whi 1 e, do...whi 1 e et for) n'ont pas la capacite de rafraichir l'ecran. En 
effet, lorsqu'un programme (script) place sur une image du scenario est execute, l'affichage 
resultant (rafraichissement) n'est realise qu'une fois le script integralement execute. 

Cela signifie que les boucles ordinaires ne peuvent etre utilisees pour deplacer un objet 
sur la scene. En effet, prenons par exemple le script suivant : 

bSavon.x =0; 

for (var i:uint = 0; i< 10; i++ ) { 
bSavon.x += 5; 

} 

L' execution de ce script ne deplace pas, comme nous pourrions l'imaginer, l'objet bSavon 
de 5 pixels en 5 pixels le long de l'axe des X. 

En effet, meme si en theorie l'idee est bonne - l'objet bSavon voit sa coordonnee en X 
augmenter de 5 en 5 a chaque tour de boucle -, en realite, 1' execution de ce programme a 
pour effet d'afficher une bulle de savon a 50 pixels du bord de la scene. Nous ne voyons 
jamais la bulle se deplacer de 5 en 5. 

Extension web 

Vous pourrez tester cet exemple en examinantle fichierAnimationFor.fi a, sous le repertoire Exemples/ 
chapitre5. 
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Que se passe-t-il lors de 1' execution du programme ? 

Nous l'avons ecrit plus haut, une image n'est rafraichie (affichee) que lorsque l'integra- 
lite du script est executee et quand les boucles « ordinaires » ne rafraichissent pas 
l'ecran. Pour ces deux raisons, la bulle de savon n'est africhee que lorsque la boucle for 
a ete totalement executee, c'est-a-dire quand i vaut 10 et done bSavon.x = 50. Aucune 
image n'est affichee avant cela. 

Ainsi, apres execution du script, l'image est affichee avec l'objet bSavon place a 50 pixels 
du bord gauche de la scene. 

Pour realiser une animation, nous devons utiliser une boucle de scenario et non une 
boucle « ordinaire ». L'emploi des boucles de scenario s'effectue en traitant l'evenement 
Event. ENTER_FRAME. 

La boucle d'evenement Event. ENTER_FR AM E 

L'evenement Event. ENTER_FRAME permet, lorsqu'il est capte, de forcer l'execution d'une 
ou plusieurs instructions a chaque fois qu'il y a rafraichissement de la scene. 

Entrerdans une boucle d'evenements 

Pour entrer dans une boucle d'evenements, nous devons faire en sorte de capturer 
l'evenement Event . ENTER_FRAME a chaque fois qu'il est emis. Cette capture est realisee par 
1' intermediate d'un gestionnaire d'evenement. 

Ainsi, pour deplacer la bulle de savon, comme nous l'avons vu au chapitre 3, 
« Communiquer ou interagir », nous devons ecrire le gestionnaire d'evenement suivant : 

bSavon . add Event Li stener( Event. ENTER_FRAME,seDepl ace) ; 
function seDeplace(e:Event) :void { 
bSavon. x= bSavon.x +5; 

} 

De cette facon, a chaque fois que l'objet bSavon receptionne l'evenement Event . ENTER_FRAME, 
l'image est rafraichie et la bulle de savon est affichee avec un decalage vers la droite de 
5 pixels. 

Sortir d'une boucle d'evenement 

La boucle Event. ENTER_FRAME est repetee a l'infini -tant que l'application est en cours 
d'execution -, la bulle se deplace vers la droite et sort de la scene, sans jamais s'arreter. 
Pour stopper le deplacement et done sortir de la boucle Event . ENTER_FRAME, deux solutions 
sont possibles : 

• Supprimer l'ecouteur d'evenement Event. ENTER_FRAME qui associe l'objet bSavon a 
Taction seDepl ace( ) grace a la methode removeEventl_istener( ). Ainsi, l'instruction : 

if (bSavon.x > 50) 
bSavon . removeEventLi stener( Event . ENTER_FRAME, seDepl ace) ; 

supprime l'ecouteur d'evenement Event. ENTER_FRAME associe a l'objet bSavon de 
l'animation. L'objet bSavon ne receptionnant plus l'evenement, l'instruction d'incre- 
mentation bSavon.x = bSavon.x + 5 n'est plus executee, la bulle est stoppee dans son 
parcours et reste affichee a sa derniere position. 

• Arreter la reception de l'evenement Event. ENTER_FRAME a reception de l'evenement 
Event. COMPLETE comme suit : 
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bSavon . add Event Listener (Event. ENTERJRAME, seDepl ace) ; 
function seDeplace(e:Event):void { 
if (bSavon.x > 50) { 

//© Emettre un evenement 

bSavon .di spa tch Event (new Event (Event. COMPLETE) ) ; 

} 

) 

//© Le gestionnaire d 'evenement Event. COMPLETE 
bSavon . add Event Listener (Event. COMPLETE, sArrete) ; 
function sArrete(e: Event) ( 
//© 

bSavon. removeEvent Li stener( Event. ENTER_FRAME, seDepl ace) ; 

} 

© Lorsque la bulle de savon se trouve a 50 pixels du bord droit de la scene, elle emet 
un evenement Event. COMPLETE grace a la methode dispatchEventO . 



Extension web 

La methode dispatchEvent( ) peutetre utilisee pour faire interagir deux objets entre eux, sans interven- 
tion de I'utilisateur. Par exemple, un objetA emet un evenement lorsqu'il finit son animation. L'objetB 
detecte cet evenement, il lance sa propre animation. 



© Lorsque l'objet bSavon recoit l'evenement Event. COMPLETE, la methode sArrete( ) est 
activee. 

© La methode sArreteO supprime l'ecouteur d'evenement Event. ENTER_FRAME qui 
associe l'objet bSavon a Taction seDepl ace( ). La bulle cesse de se deplacer. 



Extension web 

Les deux solutions sont proposees dans le fichierAnimationBoucleEvt.fi a, sous le repertoire Exem- 
ples/chapitre5. 



Repeter une boucle d'evenement 

Tout comme deux boucles ordinaires peuvent etre imbriquees, il est possible d'inclure 
une boucle d'evenement a l'interieur d'une boucle « ordinaire ». 

Lorsqu'une boucle d'evenement Event. ENTER_FRAME est placee a l'interieur d'une boucle 
ordinaire, l'animation realisee par la boucle d'evenement est associee a chaque objet cree 
par la boucle ordinaire. Ainsi, chaque objet possede son propre gestionnaire d'evene- 
ment, et done sa propre animation. 

Reprenons par exemple le cas de l'animation d'une nuit etoilee (voir section « La boucle 
do... while »). Dans cet exemple, le scintillement des etoiles est realise par l'interme- 
diaire d'un clip compose de plusieurs interpolations faisant varier plus ou moins la trans- 
parence de l'etoile. 

Nous pouvons realiser cette variation par programme, en definissant une boucle d'evene- 
ment pour chaque etoile creee a l'interieur de la boucle dc.while. La structure du 
programme est la suivante : 

//Definir des variables controlant la luminosite 

var luminosite, maxLuminosite :Number; 

var minLuminosite, vitesseScintillement:Number; 

//Declaration d'un objet de type AnimStarClp 
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var cetteEtoile:StarClp ; 
//Debut de la boucle do. ..while 
Odo { 

//© Creer une etoi 1 e 

cetteEtoile = new StarClpO ; 

//Placer 1 'occurrence courante au hasard 

//Voir section La boucle do...while - Une nuit etoi lee 

//© Definir la luminosite initiale de 1 * etoi 1 e courante 

luminosite = Math.random()*0.8; 

cetteEtoile. alpha = luminosite; 

//Definir une vitesse de scintillement 

vitesseScintillement = Math.random()*0.08; 

//Definir un intervalle de luminosite 

maxLuminosite = Math.random()*0.8; 

minLuminosite = Math.random()*0.1; 

//© Entrer dans la boucle d'evenement de 1 'etoile courante 
cetteEtoi le.addEventListener( Event. ENTER_FRAME, bri 1 le) ; 
function brille(e:Event):void { 

//© Retrouver la bonne etoile 

var cible:MovieClip = e.currentTarget as MovieClip; 
cible. alpha -=vitesseScintillement; 
if (cible. alpha < minLuminosite) { 

luminosite = Math. randomt )*maxLuminosite; 

cible. alpha = luminosite; 

vitesseScintillement = Math . random( )*0 . 08 ; 

maxLuminosite = Math. randomt )*0. 8; 

minLuminosite = Math.random()*0.1; 

} 

} 

addChild(cetteEtoile) ; 

//Passer a l'occurrence suivante 
i++ ; 
} while (i < 20); 



Extension web 

Ce script est enregistre dans le fichier EtoileBoucleEvt.fi a sous le repertoire Exemples/chapitre5. 



O La boucle do...whi 1 e est utilisee pour creer les 20 etoiles. C'est une boucle « ordinaire » 
executee dans son integralite, avant l'affichage des 20 etoiles. 

© A chaque tour de boucle, une occurrence cetteEtoile est creee pour un i donne. 
cetteEtoile correspond done, a chaque tour de boucle effectue, a une des 20 etoiles. 
Chaque etoile est un clip compose d'une seule image representant une etoile fixe. 

© Avant de lancer 1' animation, chaque etoile possede sa propre luminosite calculee au 
hasard entre 0 et 0.8. Des valeurs (maxLuminosite, minLuminosite et vitesseScintillement) 
sont egalement calculees aleatoirement afin de rendre le scintillement propre a chaque 
etoile. 

© Chaque etoile possede sa propre boucle d'evenement definie a l'aide du gestionnaire 
d'evenement Event . ENTER_FRAME. Pour chacune des etoiles, la methode bri 1 1 e( ) est activee. 

© Si nous utilisons le terme cetteEtoile au lieu de cible a l'interieur du gestionnaire 
d'evenement (et beaucoup de programmeurs debutants commettent cette erreur), 
1' animation ne fonctionne plus correctement. Une seule etoile scintille et toutes les autres 
restent desesperement fixes. 
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Remarque 

II est obligatoire, dans la methode brilleO, d'utiliser un objetcible au lieu de cetteEtoile en utili- 
santl'instruction : 

var cible:MovieClip = e.currentTarget as MovieClip; 

Dans cette instruction, e represente Pevenement regu (objet passe en parametre de la fonction 
brilleO) et currentTarget I'objetqui vientde receptionner Pevenement. 



Que se passe-t-il ? 

La boucle dc.while est une boucle « ordinaire », executee dans son integralite avant tout 
affichage. Elle permet la creation des 20 etoiles et la definition des gestionnaires 
d'evenements pour l'objet cetteEtoile. Lorsque la boucle est entierement executee, 
l'objet cetteEtoi 1 e correspond a la 19 e etoile et uniquement celle-la. Lorsque l'animation 
est enfin affichee en sortie de la boucle do...whi 1 e, toutes les etoiles sont creees et placees 
au hasard sur la scene. Les gestionnaires d'evenements sont egalement definis, mais tous 
s'executent sur l'objet cetteEtoile, c'est-a-dire l'etoile n° 19, puisque, par principe, une 
boucle « ordinaire » est entierement traitee avant tout rafraichissement. 

L'emploi de l'objet ci bl e permet d'eviter cet inconvenient. En effet, lors de la creation du 
gestionnaire d'evenement d'une etoile donnee, e.currentTarget indique quel objet est en 
train de recevoir l'evenement. e.currentTarget represente done l'etoile courante dans la 
boucle d'evenement et non l'objet courant dans la boucle « ordinaire ». Chaque gestion- 
naire d'evenement s' applique a l'etoile courante et realise le traitement pour l'etoile 
chargee en memoire au moment de la definition du gestionnaire. De cette facon, Taction 
de « briller » est activee pour toutes les etoiles et toutes scintillent. 

Pour chacune des etoiles, le gestionnaire d'evenement modifie la transparence de l'objet 
concerne. L'objet ci bl e represente l'objet cetteEtoile, lequel correspond a une etoile 
pour un i donne. Lorsque l'objet devient trop transparent, une nouvelle luminosite est 
calculee de facon a voir reapparaitre l'etoile courante. 



Les trois boucles decrites ci-apres ont toutes pour resultat 1' affichage de la fenetre de 
sortie suivante : 



Memento 



Figure 5-7 



- x 



Affichage du compteur 
de boucle 
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Boucle n° 5 
Boucle n° 6 
Boucle n° 7 
Boucle n° 8 
Boucle n° 9 
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La boucle while 

var i mint = 5; 
while (i < 10) { 

trace( "Boucl e n' "+ i ); 

} 

Dans la boucle whi 1 e, le test de continuation de boucle s'effectue a l'entree de la boucle. 
La variable i (compteur) doit done etre declaree et initialisee correctement pour etre sur 
que les instructions placees a l'interieur de la boucle soient executees au moins une fois. 
L'instruction i++, placee a l'interieur de la boucle, garantit que le test (i < 10) ne reste 
pas toujours vrai et empeche le programme de boucler a l'infini. 

La boucle do... while 

var i mint = 5; 
do { 

trace( "Boucl e n' "+ i ); 
i++; 

) while (i < 10); 

Dans la boucle do_wh1 1 e, le test de continuation de boucle s'effectue en sortie de boucle. 
Ainsi, quelle que soit la condition, nous sommes assures que la boucle est executee au 
moins une fois. 

La boucle for 

for (var i : ui nt = 5; i < 10; i++) { 
tracet "Boucl e n" "+ i ) ; 

} 

Dans la boucle for, la declaration, 1' initialisation, le test de continuation de boucle ainsi 
que 1' incrementation du compteur sont places a l'interieur d'une seule et meme expres- 
sion. La boucle for est utilisee quand on connait a l'avance le nombre d'iterations a 
executer. 

La boucle d'evenement Event.ENTER_FRAME 

var i mint = 5; 

cetObjet.addEvent Li stenert Event. ENTER_FRAME, compter) ; 
function compter(e:Event):void { 

tracet "Boucl e n" "+ i ) ; 

i++; 

if ( i >= 10) 

cetObjet . removeEvent Listener ( Event . ENTER_FRAME, compter) ; 

} 

Le gestionnaire d'evenement Event. ENTER_FRAME force l'execution d'une ou plusieurs 
instructions a chaque emission de l'evenement, e'est-a-dire a chaque fois qu'il y a rafrai- 
chissement de la scene. Les boucles ordinaires (while, do...while et for) n'ont aucun effet 
sur le rafraichissement de la scene. 
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Exercices 



L'objectif de cette serie d'exercices est de realiser une course (improbable) entre un 
troupeau d'agneaux et un groupe d'oiseaux. La course demarre au lancement de 
l'animation et s'arrete des que l'un des participants touchent le bord droit de la fenetre 
(voir figure 5-8). 



La course terminee, le gagnant est place au centre de la scene et affiche un message de 
satisfaction, tandis que les perdants restent dans un coin de la scene affichant leur desap- 
pointement. 



Extension web 

Pourvous faciliter la tache, le fichier Exercice5.fla, a partir duquel nous allons travalller, se trouve dans 
le repertoire Exercices/SupportPourRealiserLesExercices/Chapitre5. Dans ce meme reper- 
toire, vous pouvez acceder aux differentes applications telles que nous souhaitons les voir fonctionner 
(Exercice5_l.swf a Exercice5_5.swf) une fois realisees. 



Remarque 

Pour realiser ces exercices, nous vous proposons d'utiliser, dans I'ordre donne, les trois types de boucles 
a des fins pedagogiques mais toutes pourraient etre utilisees de fa con equivalents pour realiser Impli- 
cation. 



Figure 5-8 

A I'arrivee, le 
gagnant sefelicite, 
les autres sont 
depites. 





La boucle do... while 



Au lancement de la course, un troupeau d'agneaux est cree a l'exterieur gauche de la 
scene, sur une bande centree au trois quart de la hauteur de l'animation. 
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Exercice 5.1 

Pour creer et positionner les agneaux, l'algorithme est le suivant : 
Faire 

1. Creer une occurrence nominee agneau, de type AgneauClp. 

2. Positionner 1' agneau en dehors de la scene, a gauche. 

3. La position des agneaux est calculee au hasard dans un intervalle de : 
- 0 a 40 pixels pour x. 

-hauteur / 4 et 3*hauteur / 4 pixels pour y. 

4. Chaque agneau possede sa propre vitesse calculee au hasard entre 2 et 7. Pour cela, 
utiliser le code suivant : 

| agneau. vitesse = Math. random( )*5+2; 

ou agneau correspond a l'occurrence courante dans la boucle de creation des agneaux, 
et vitesse devient par 1' intermediate de la notation « . », une nouvelle propriete de 
l'objet agneau. Chaque agneau possede ainsi une vitesse specifique. 

K3= Pour en savoir plus 

La definition de propriete d'objet est etudiee plus precisementau cours du chapitre 8, « Les classes etles 
objets », section « Construire et utiliser ses propres classes ». L'ajout d'une propriete est traite au 
chapitre 9, « Les principes du concept objet », section « Les classes dynamiques ». 

5. Les agneaux ne sont pas synchronises, calculer au hasard l'image de depart de 
l'animation du clip (voir en exemple le fichier QuestionReponseAnimation.fla, sous le 
repertoire Exemple/Chapitre2). 

6. Afficher l'agneau. 

7. Passer a l'agneau suivant. 

Tant que le compteur d' agneaux est plus petit que le nombre maximal d' agneaux. 



Remarque 

Avant de mettre en place la boucle do...whi 1 e, veillez a bien declarer une variable pour definir le nombre 
maximal d'agneaux et une autre pour le compteur d'agneaux. 

Exercice 5.2 

Chaque agneau possede un numero de participant affiche dynamiquement sur le dos de 
l'animal, a l'aide des classes TextFormat et TextField. 

1. En dehors de la boucle, definir un format d'ecriture a l'aide de l'instruction : 

var format:TextFormat = new TextFormat(pol ice, taille, couleur); 

oil le premier parametre est une chaine de caracteres correspondant au nom de la 
police que vous souhaitez utiliser, le second parametre est une valeur numerique 
determinant la taille de la police, et le troisieme parametre est le code hexadecimal de 
la couleur d' affichage du texte. 

2. A l'interieur de la boucle, apres l'affichage de l'agneau, creer un champ de texte en 
utilisant l'instruction : 



var dossard:TextField = new TextFieldO; 
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3. Modifier le format de texte par defaut dudossard comme suit : 
dossard.defaultTextFormat = format; 

4. Positionner le champ de texte au centre du clip en modifiant les proprietes x et y du 
dossard. 

5. Afficher le numero du participant. Vous aurez pris soin de definir auparavant une 
variable pour compter le nombre de participants qui est pour l'instant egal au nombre 
d'agneaux crees mais qui dans l'exercice suivant sera egal au nombre d'agneaux et 
d'oiseaux crees. Le numero s'afhche en modifiant la propriete text de dossard. 

6. Placer l'objet dossard dans la liste d'affichage de l'agneau en cours de creation, grace 
a 1' instruction : 

agneau.addChi Id (dossard) ; 



La boucle while 
Exercice 5.3 

La boucle whi 1 e est utilisee pour creer le groupe d'oiseaux. En utilisant la meme demar- 
che que celle decrite au cours des exercices 5.1 et 5.2, creer un groupe d'oiseaux se 
situant dans le premier quart superieur de la scene, et a gauche de la scene. Chaque 
oiseau possede un dossard affichant un numero de participant. 



Remarque 

Avant de mettre en place la boucle while, veillez a bien declarer une variable pour definir le nombre 
maximal d'oiseaux et une autre pour le compteur d'oiseaux. Ce dernier doit obligatoirement etre initialise 
a 0 pour que le test d'entree de boucle soitvrai. 



Repeter une boucle d'evenement 
Exercice 5.4 

1. Les agneaux et les oiseaux se deplacent de la gauche vers la droite. Creez pour 
chaque clip (oiseau et agneau) un gestionnaire d'evenement Event. ENTER_FRAME qui a 
pour action de deplacer chaque clip avec sa propre vitesse. Un agneau ou un oiseau se 
deplace de la meme facon. L'action (seDepl ace( )) attribuee au gestionnaire est identique, 
quel que soit l'objet ecouteur. 



Remarque 

Pour deplacer un element (oiseau ou agneau) en utilisant la vitesse qui lui a ete attribuee au moment 
de sa creation, vous devez utiliser un objet cible declare comme suit, a I'interieur de la fonction 
seDeplaceO : 

var cible:MovieCl ip = e.currentTarget as MovieClip;. 



2. Lorsqu'un oiseau ou un agneau depasse la largeur de la scene, il emet un evenement 
Event. COMPLETE. L'action associee a cet evenement (nominee sArrete( )) a pour resul- 
tat d'afficher (pour l'instant), un message indiquant que l'oiseau ou l'agneau est sorti. 
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Exercice 5.5 

Lorsqu'un oiseau ou un agneau sort, le premier est place au centre de la scene affichant 
un message du type « J'ai gagne », les autres sont places dans le coin inferieur gauche 
affichant leur deception. 

1. La methode sArreteO doit avoir acces a l'ensemble des clips presents sur la scene 
pour eviter d'avoir a traiter les elements deja presents, par exemple le fond de 
1' animation, les zones de texte et ne traiter que les clips AgneauClp et OiseauCl p : 

- Creez en debut de programme un conteneur de type Spri te. Nommez-le terra inCourse. 
Affichez le terrain de course. 

-Dans les deux boucles while et do_while, ajoutez les agneaux et les oiseaux au 
conteneur terrainCoursea l'aide d'une instruction du type : 

terrainCourse.addChi Id (oiseau) ; 

ou 

terrainCourse.addChild( agneau) ; 

2. Dans la methode sArrete( ) : 

- Recuperez l'objet emetteur de l'evenement Event. COMPLETE, grace a l'instruction : 

var ci bl e : Movi eCl i p = e.currentTarget as MovieClip; 

- Parcourez la liste d'affichage du conteneur terrainCourse, a l'aide d'une boucle for. 
Le test de fin de boucle s'effectue sur terrainCourse. numChildren. Pour chaque 
element de la liste enregistre dans terrainCourse : 

- Recuperez, grace a la methode getChi 1 dAt( ), le clip enregistre au niveau i. Enre- 
gistrez-le dans un objet tmp de type Movi eCl i p. 

- Supprimez les ecouteurs d'evenement Event. COMPLETE et Event. ENTER_FRAME associes 
au clip tmp. 

- Deplacez l'objet tmp en bas a gauche de la scene et stoppez son animation. 



Remarque 

L'objet tmp represente a chaque tour de boucle un element de la liste d'affichage de terrainCourse, 
c'est-a-dire au final, tous les agneaux ettous les oiseaux. 



3. Tous les clips sont arretes, y compris le gagnant ! Comment retrouver le gagnant ? 

Tous les clips etant stoppes et deplaces en bas a gauche, ils ne pourront plus emettre 
d'evenement Event. COMPLETE. Le seul ayant emis cet evenement est le premier a avoir 
franchi la ligne, il est enregistre dans l'objet ci bl e. 

- Placez l'objet cible au centre et jouer son animation 

- Affichez un message pour le gagnant en utilisant le clip BulleClp present dans la 
bibliotheque, grace au texte dynamique label Out. 

- Affichez un message pour les perdants en utilisant le clip Bui 1 eCl p present dans la 
bibliotheque, grace au texte dynamique label Out. 
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Le projet mini site 

Les pages Photos, Animes et Videos se presenters sous la meme forme. Chacune possede 
une serie de vignettes qui representent sous un format reduit les photos, les animations ou 
les videos a visualiser. Lorsque le curseur de la souris survole une des vignettes, la 
vignette change d' aspect. Son opacite diminue et le curseur de la souris de transforme 
egalement pour passer d'une simple fleche a la forme d'une main. 

Nous vous proposons pour ce chapitre d'inserer l'affichage des vignettes pour la page 
Photos (voir figure 5-9), en utilisant deux boucles for imbriquees. 
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Figure 5-9 

La page Photos 
affiche une serie 
de vignettes en ligne 




Arborescence du site 

Le site propose quatre rubriques distinctes contenant chacune des informations specifi- 
ques. Ann de retrouver ces informations sans jamais pouvoir les intervertir avec une autre 
page, nous vous proposons d' organiser les repertoires contenant 1' information comme 
suit : 

• La racine du site est composee de quatre repertoires nommes respectivement Photos, 
Animes, Videos et Infos. A l'interieur de ces repertoires se trouvent les vignettes, les 
photos, les animations, les videos ainsi que des fichiers dans lesquels se trouvent des 
informations plus precises sur les photos, les animations, etc. 

• Le repertoire Photos contientdes fichiers images nommes vignette0.jpg, vignettel.jpg, 
vi gnette2 . jpg. . . dans lesquels est stocke un extrait de la photo grand format a laquelle 
est associee la vignette. Les photos grand format sont enregistrees dans des fichiers 
nommes Photos0.jpg, Photosl.jpg, Photos2.jpg... Les informations textuelles sont 
stockees dans des fichiers texte, nommes Infos0.txt, Infosl.txt, Infos2.txt... 

• Le repertoire Animes contient egalement des fichiers images nommes vignette0.jpg, 
vignettel.jpg, vignette2.jpg... dans lesquels est stockee une prise de vue de l'anima- 
tion. Les animations sont enregistrees dans des fichiers nommes AnimesO.swf, 
Animesl.swf, Animes2.swf... Les informations textuelles sont stockees dans des fichiers 
texte, nommes Infos0.txt, Infosl.txt, Infos2.txt... 
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Les autres repertoires Videos et Infos contiennent egalement des richiers images et 
textuels, nous les examinerons plus precisement au chapitre 10, « Le traitement de 
donnees multimedia ». 

Afficher les vignettes 

L'africhage de la page Photos reprend les techniques de transitions realisees au cours du 
chapitre precedent. 

Extension web 

Pour vous faciliter la tache, la mise en place des objets proposes dans cet exercice est definie dans le 
fichier ProjetChapitre5.fl a situe dans le repertoire Projet/SupportPourReal iserLesExercices/ 
Chapitre5. Dans ce meme repertoire, vous pouvez acceder a I'application telle que nous souhaitons la 
voirfonctionner(ProjetChapitre5.swf) une fois realisee. 



Reprenez le code du script ProjetChapitre5.fla et modifiez-le de facon a afficher non 
plus la rubrique Animes, mais la rubrique Photos. 

Emettre l'evenement Event.COMPLETE 

L'africhage des vignettes s'effectue au moment oil la page Photos a fini de s' afficher. Afin 
de realiser cet affichage, nous allons mettre en place un emetteur d'evenement qui indi- 
quera a la page Photos qu'elle a fini son affichage. L'evenement envoye est 
Event.COMPLETE. Parallelement, un ecouteur de l'evenement Event.COMPLETE est ajoute a la 
page Photos. Lorsque cette derniere recoit l'evenement, elle affiche les vignettes. 

Pour realiser ce type de communication, vous devez : 

• Rechercher la fonction affichant la page Photos. 

• A l'interieur de cette fonction, retrouver le bloc d' instruction qui indique que la page 
est totalement affichee. 

• A l'interieur de ce bloc, faire en sorte d'envoyer un evenement Event.COMPLETE. Vous 
utiliserez pour cela la methode dispatchEvent( ) comme suit : 

| cible.dispatchEvent(new Event(Event. COMPLETE) ) 

ou cible represente l'objet pagePhotos. 

Recevoir l'evenement Event.COMPLETE 

Lors de la definition de l'objet pagePhotos, definissez l'ecouteur d'evenement 
Event.COMPLETE, comme suit : 

pagePhotos .add Event Li stener( Event. COMPLETE, afficher Les Vignettes) ; 

De cette fagon, la page Photos affiche les vignettes des que l'evenement Event.COMPLETE 
est emis. Cet affichage est realise par la fonction afficherLesVignettes( ). 

La fonction afficherLesVignettes() 

Pour afficher les vignettes en ligne et en colonne, nous vous proposons de reprendre la 
technique etudiee au cours de ce chapitre, en section « Un tableau de photos ». Le 
nombre de lignes et de colonnes depend du nombre de vignettes a afficher. Pour notre 
exemple, il y a 35 vignettes que nous affichons sur 7 lignes et 5 colonnes. 
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Quelques precisions cependant : si vous souhaitez voir les vignettes disparaitre lorsque 
vous cliquez sur le titre, vous devez : 

• Creer un conteneur boi tePhotos de type Spri te afin d'y inserer les photos en ligne et en 
colonne a l'aide de la methode addChi 1 d( ). Le conteneur est declare au meme endroit 
que l'objet rubriquePhotos. 

• Pour chaque vignette creee, ajouter les ecouteurs d'evenement MouseEvent.MOUSE_OVER, 
et MouseEvent.MOUSE_OUT. Les actions a mener sont celles definies au cours du 
chapitre 3, « Communiquer ou interagir », section « Le projet mini site - Le survol de 
la souris ». 



Pour en savoir plus 

La creation etla gestion des conteneurs sont etudiees au chapitre 2, « Les symboles », section « Gestion 
de la liste d'affichage - Creerun conteneur*. L'influence du lieu de declaration des variables est traitee au 
chapitre 7, « Les fonctions », section « Influence de la structure d'un script sur son comportement». 



• Afficher le conteneur boitePhotos. 

• A 1' interieur de la fonction cl i cSu rTi t re ( ) inserer les instructions suivantes : 

//Si la boitePhotos a deja ete creee 
if (boitePhotos != null ) { 
//Supprimer la boitePhotos afin de 1'effacer 

removeChild(boitePhotos) ; 
//Creer une nouvelle boitePhotos vide 

boitePhotos = new SpriteO; 
//Afficher la boitePhotos vide 
addChild(boitePhotos) ; 

} 
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Comme nous l'avons observe tout au long de cet ouvrage, l'atout principal de l'ordina- 
teur est sa capacite a manipuler un grand nombre de donnees pour en extraire de nouvelles 
informations. Or, les structures de stockage etudiees jusqu'ici, telles que variables ou 
objets, ne permettent pas toujours d'appliquer de traitements systematiques sur des 
ensembles de valeurs. 

Nous etudions dans ce chapitre une nouvelle structure de donnees : les tableaux. Ceux-ci 
permettent la creation et la manipulation d'un tres grand nombre de valeurs de facon 
repetitive. 

Dans un premier temps (voir section « Les tableaux »), nous etudierons la structure gene- 
rale d'un tableau et observerons comment les creer. Nous decouvrirons egalement 
comment creer des tableaux multidimensionnels. 

Nous examinerons ensuite comment enregistrer ou consulter les elements d'un tableau 
(voir section « Acceder aux elements d'un tableau »). Au cours de la section « Les outils 
proposes par ActionScript », nous detaillerons les differentes methodes propres au 
langage pour ajouter, supprimer ou trier les elements d'un tableau. 

Pour finir, 1' etude de la section « Le trombinoscope - 2 e version » vous aidera a mieux 
comprendre la manipulation de ces structures, grace a une analyse et une mise en ceuvre 
des differentes techniques de programmation appliquees aux tableaux. 



Les tableaux 



Pour manipuler plusieurs valeurs a l'interieur d'un programme, nous devons declarer 
autant de variables que de valeurs a traiter. Ainsi, pour stacker les huit notes d'un eleve 
donne, la technique consiste a declarer huit variables, comme suit : 



var notel, note2, note3, note4, note5, note6, note7, note8:Number; 
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Le fait de declarer autant de variables qu'il y a de valeurs presente les inconvenients 
suivants : 

• Si le nombre de notes est modifie, il est necessaire de : 

- declarer de nouvelles variables ; 

- inserer ces variables dans le programme, en ajoutant de nouvelles instructions afin 
de les traiter en plus des autres notes ; 

- executer a nouveau le programme pour que les modifications soient prises en 
compte. 

• II faut trouver un nom de variable pour chaque valeur traitee. Imaginez declarer 
1 000 variables portant un nom different ! 

Ces inconvenients majeurs sont resolus grace aux tableaux. En effet, les tableaux sont 
des structures de donnees qui regroupent sous un meme nom de variable un certain 
nombre de valeurs. Les tableaux sont proposes par tous les langages de programmation. 
lis sont construits par assemblage d'une suite de cases memoire, comme illustre a la 
figure 6-1. 



Structure d'un tableau 

En ActionScript, un tableau est consume d'un nom et d'une suite de cases memoire appelees 
« elements de tableau ». Chaque element de tableau : 

• Est utilise pour stacker une donnee qui peut etre de n'importe quel type. 

• Possede un numero unique qui permet de retrouver l'element. Ce numero correspond 
a la position de l'element a l'interieur du tableau. Ce numero est egalement appele 
« indice ». Le premier element d'un tableau a pour numero 0 et non 1. 

Le nombre d' elements contenus dans un tableau determine la longueur ou encore la taille 
du tableau. 



Figure 6-1 

La taille du tableau 

desPrenoms 

est egale a 4. 



Nom du 
tableau 



Elements 



-* desPrenoms 



"Elena" 



'Nicolas " 



"Pablo" 



N 

"Margoline" 



Indice 



n°0 
n°l 
n°2 
n°3 
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Creer un tableau 

II existe deux facons de creer un tableau en ActionScript, soit en le declarant a l'aide de 
l'outil Array( ), soit en l'initialisant directement avec l'expression []. 

La methode Array() 

La methode ArrayO est une fonction proposee par les concepteurs du langage Action- 
Script, qui permet de construire des tableaux. La syntaxe d'ecriture de cette methode 
varie en fonction des parametres passes lors de son appel. 



Remarque 

En terminologie objet, on dit que la methode Array ( ) est un « constructeur ». Les constructeurs sont 
etudies plus precisement au chapitre 8, « Les classes et les objets ». 



• Appel sans parametre 

L' instruction suivante utilise le constructeur Array( ) sans parametre, comme le montre 
1' instruction : 

var desPrenoms:Array = new ArrayO; 

Cette instruction a pour resultat de creer, grace a l'operateur new, un tableau desPrenoms 
ne contenant qu'une seule case vide. 

• Appel avec un seul parametre numerique 

Lorsque Ton passe en argument du constructeur une et une seule valeur numerique 
comme suit : 

var desPrenoms:Array = new Array(4); 

Le tableau cree contient autant de cases vides que le nombre specifie en parametre. Ici, 
le tableau desPrenoms contient quatre cases vides. 

• Appel avec plusieurs parametres 

Lorsque Ton passe en argument du constructeur Array ( ) une suite de valeurs comme suit : 

var desPrenoms : Array = new ArrayCElena", "Nicolas", 

"Pablo", "Margoline"); 

chaque terme passe en parametre du constructeur ArrayO devient un element du 
tableau desPrenoms. Le premier parametre est place a l'indice 0, le second a l'indice 1 . . . 
(voir figure 6-1). Dans cet exemple, El ena est place a l'indice 0 du tableau desPrenoms et 
Margol ine a l'indice 3. 



Question 

Que realise I'instruction suivante ? 

var desAges :Array = new Array(12, 9, 16, 22); 

Reponse 

Les parametres du constructeur Array ( ) sont numeriques et ils sont en nombre superieur a 1 (nous ne 
sommes done pas dans le cas « Appel avec un seul parametre numerique » evoque ci-dessus). Dans 
cette situation, le lecteur Flash cree un tableau constitue de quatre elements contenant chacun une valeur 
numerique. La valeur 12 estenregistree a l'indice o etla valeur 16 a l'indice 2. 
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En ActionScript, les elements d'un meme tableau peuvent etre de types differents, ce qui 
n'est pas toujours le cas dans d'autres langages de programmation comme le langage C 
ou Java. Ainsi, la declaration suivante : 

var desPrenoms : Array = new Array( "El ena" , 12, "Nicolas", 9 

"Pablo", 16, "Margoline", 22); 

est valide et a pour resultat de creer un tableau dont les elements d'indice pair correspon- 
dent a des chaines de caracteres (prenoms), et les elements d'indice impair a des valeurs 
numeriques (age). 

D'une maniere generale, le constructeur Array( ) est plutot utilise pour creer des tableaux 
vides avec, selon le cas, un nombre donne d'emplacements. 

Lexpression [ ] 

En pratique, les tableaux sont crees en utilisant l'expression [] a la place du constructeur 
Array( ). 

Ainsi, l'instruction : 

var desPrenoms : Array = ["Elena", "Nicolas", "Pablo", "Margoline"]; 

a pour resultat de creer un tableau desPrenoms dont le premier element d'indice 0 est 
"Elena" et le dernier d'indice 3 est "Margol ine". 

Les crochets ouvrant et fermant, [ et ], indiquent au lecteur Flash qu'il doit creer un 
tableau et que toutes les donnees situees a Pinterieur de ces crochets correspondent aux 
elements du tableau. Chaque donnee doit etre separee par une virgule. 

Tableau et adresse memoire 

Un tableau est une suite de cases memoire allouees par le lecteur Flash a l'aide de 
l'operateur new. Examinons plus attentivement les operations realisees lors de l'execution 
de l'instruction : 

var notes:Array = new Array(8); 

• La variable notes est creee dans un premier temps. Cet espace memoire est vide pour 
P instant. 

• L'operateur new reserve ensuite autant de cases memoire qu'il est indique entre paren- 
theses du constructeur Array( ), soit 8. 

• L'operateur new determine enfin P adresse de la premiere case du tableau et la stocke 
grace au signe d'affectation dans la case notes creee a Petape precedente. 



Figure 6-2 

L'operateur new 
reserve le nombre 
de cases memoire 
demande (8) et 
memorise 1' adresse 
de la premiere case 
memoire dans 
la variable notes 
grace au signe 
d'affectation. 
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La variable notes ne contient done pas de valeurs numeriques mais une adresse memoire 
qui correspond a l'adresse de la premiere case du tableau. A ce titre, notes n'est plus 
considere comme une variable mais comme un objet. 

ps° Pour en savoir plus 

Les notions d'objet et d'adresse sont developpees au chapitre 8, « Les classes et les objets ». 
Tableau a plusieurs dimensions 

Les tableaux crees au cours des deux sections precedentes sont des tableaux a une dimen- 
sion, e'est-a-dire que les donnees qu'ils contiennent sont representees par une ligne ou 
une colonne. 

II est possible de travailler avec des tableaux de deux, trois, voire n dimensions. 



Remarque 

Le langage Actions criptne dispose pas d'outil specifique pourcreerdes tableaux a plusieurs dimensions. 
II ne fournit que des outils de creation de tableaux a une dimension. 



Pour creer, ou plutot simuler, un tableau a plusieurs dimensions, nous devons done imbri- 
quer des tableaux a l'interieur de tableaux. Pour simplifier, examinons comment creer un 
tableau a deux dimensions constitue de 2 lignes et de 3 colonnes. 

• Avec le constructeur Array ( ), la demarche est la suivante : 

var ligneO:Array = new Array ("Elena", "Nicolas", "Pablo"); 
var lignel:Array = new Array (12, 9, 16); 

var tableau:Array = new Array (ligneO, lignel); 

Les deux premieres instructions creent deux tableaux, ligneO et lignel, constitues 
chacun de 3 elements (3 prenoms et 3 ages respectivement). Grace a la troisieme 
instruction, ces deux tableaux deviennent a leur tour les elements de tableau (voir 
figure 6-3). 

• Avec l'expression [], nous devons ecrire : 

var ligneO:Array = ["Elena", "Nicolas", "Pablo"]; 
var lignel:Array = [12, 9, 16]; 
var tableau:Array = [ligneO, lignel]; 

Nous obtenons aussi un tableau constitue de 2 lignes et de 3 colonnes comme le 
montre la figure 6-3. 



Figure 6-3 



Un tableau de 
2 lignes contenant 



Indice 

chacune 3 elements ligne 

n° 0 
n° 1 



tableau 



n°0 



n° 1 n° 2 Indice 



colonne 



ligneO 


"Elena" 


"Nicolas" 


"Pablo" 


lignel 


12 


9 


16 
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Acceder aux elements d'un tableau 

Un tableau est done un ensemble d'elements, chacun d'entre eux pouvant etre considere 
comme une variable. Chaque element du tableau peut etre manipule de facon a : 

• placer une valeur dans une case du tableau a l'aide de l'affectation ; 

• utiliser un element du tableau dans le calcul d'une expression mathematique ; 

• afficher un element du tableau. 

Tableau a une dimension 

Sachant que nomDuTableau[0] represente la premiere case du tableau, l'acces a la n-ieme 
case s'ecrit nomDuTableau[n]. 



Figure 6-4 

desNotes est le nom du 
tableau et les notes 12, 15, 8, 
16 sont des valeurs placees a 
l'aide du signe d' affectation 
dans les cases numerotees 
respectivement 0, 1,2 et 3 
{indices). 



es A/ f 



y 



^y 



desNotes 



12 



15 



16 



Par exemple, 1' instruction : 
desNotes[0] = 12; 

memorise la premiere note d'un etudiant dans la premiere case du tableau (desNotes [0]). 
De la meme facon, la deuxieme note est stockee grace a l'affectation : 

desNotes[l] = 15; 

et ainsi de suite, jusqu'a stocker la quatrieme et derniere note a l'aide de l'instruction : 
desNotes[3] = 16; 

Les valeurs placees entre les crochets [ ] sont appelees les « indices » du tableau. 



Remarque 

La premiere case d'un tableau est numerotee a partir de 0 et non de 1 (voir figure 6-4). 



Les elements d'un tableau etant ordonnes grace aux indices, il est possible d'y acceder a 
l'aide de constructions iteratives (boucle for) , comme le montre l'exemple suivant. 
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Exemple : consulter les elements d'un tableau 

O var desPersonnes : Array = ["Elena", 12, "Nicolas", 9, "Pablo", 16]; 
© for (var i:uint = 0; i< 6; i+=2 ) ( 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

Ces instructions ont pour resultat d'afficher dans la fenetre de sortie les lignes suivantes : 
Elena a 12 ans 
Nicolas a 9 ans 
Pablo a 16 ans 

O Le tableau est initialise. Les prenoms sont enregistres aux indices 0, 2 et 4 et les ages le 
sont aux indices 1, 3 et 5. 

© Le programme entre dans une boucle for. La variable i correspond au compteur de 
boucles. Elle varie entre 0 et 6. Le pas d' incrementation de la boucle est de 2. 

Ainsi, a chaque tour de boucle, la variable i est utilisee comme indice du tableau, la 
commande traceO affiche en une seule fois le prenom (desPersonnes[i]) et l'age d'une 
personne (desPersonnes[i+l]). 

La boucle for s'arrete lorsque 1 vaut 5 (i strictement inferieur a 6), alors que le tableau 
contient 6 elements. En effet, la commande trace ( ) affiche a la fois 1' element courant [i ] 
et le suivant [1+1]. Si la boucle for cessait d'etre executee pour 1 valant 6, l'acces a 
l'element desPersonnes[i+l] poserait probleme, l'element desPersonnes[7] n'etant pas 
defini. 



Remarque 

La somme, la soustraction, la division et la multiplication directe de deux tableaux sont des operations 
impossibles. En effet, chaque operation doit etre realisee element par element, comme le montre le 
tableau suivant: 


Correcte 


Impossible 


var tabl:Array = [10, 8, 6]; 
var tab2:Array = [2, 16, 22]; 
somme = new ArrayO) ; 
for (i = 0; 1 < 3; 1++) 
somme[i] = tabl[i] + tab2[i]; 


Var tabl:Array = [10, 8, 6]; 
var tab2:Array = [2, 16, 22]; 
somme = new ArrayO) ; 

somme~^J*bJ^Jtab2 ; 





Tableau a deux dimensions 

Pour initialiser, modifier ou consulter la valeur d'un element d'un tableau a deux dimen- 
sions, il convient d'utiliser deux indices : un pour les lignes et un pour les colonnes. 
Chaque indice etant controle par une boucle for, la technique consiste a imbriquer deux 
boucles de la facon suivante : 

for (var i:uint = 0; i < nombreDeLignes; i++) { 

for (var j : u i n t = 0; j < nombreDeCol onnes ; { 
nomDuTableau[i][j] = uneValeur; 

} 

} 
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Les variables i et j sont utilisees comme compteurs de boucles et indices du tableau 
nomDuTableau. Elles permettent l'acces aux lignes et aux colonnes de nomDuTableau grace 
aux doubles crochets entourant les deux indices. Les deux premiers crochets donnent 
acces aux lignes, et les seconds aux colonnes. 

Exemple : consulter les elements d'un tableau 

var ligneO:Array = ["Elena", "Nicolas", "Pablo"]; 
var lignel:Array = [12, 9, 16]; 
var tableau:Array = [ligneO, lignel]; 

for (var i :uint = 0; i< 2; i++ ) { 
for (var j:uint = 0; j< 3; j++ ) { 

tracer tableau ["+i+"]["+j+"] = " + tabl eau[i ] [j] ) ; 

} 

} 

Ces instructions ont pour resultat d'afficher dans la fenetre de sortie les lignes suivantes : 

tableau [0][0] = Elena 

tableau [0][1] = Nicolas 

tableau [0][2] = Pablo 

tableau [1][0] = 12 

tableau [1][1] = 9 

tableau [1][2] = 16 



Les prenoms sont enregistres sur la premiere ligne de tableau alors que les ages le sont 
sur la seconde ligne. Les deux boucles i et j sont imbriquees, la boucle j se trouvant a 
l'interieur de la boucle i. A chaque tour de boucle i, la boucle j est totalement executee 
pour j valant de 0 a 2. De cette facon, tous les elements de la premiere ligne sont affiches 
(tableau[0]), puis tous ceux de la seconde ligne (tableau[l]). 

D<r Pour en savoir plus 

Les boucles imbriquees sont etudiees en detail au chapitre 5, « Faire des repetitions », section « Un 
tableau de photos », paragraphe « Les boucles imbriquees ». 

Determiner la taille du tableau 

Le parcours de l'integralite d'un tableau s'effectue tres aisement avec une structure repe- 
titive telle que la boucle for. L'indice du tableau varie entre 0 et une valeur qui est fonc- 
tion du nombre d'elements defini a l'interieur du tableau. 

En ActionScript, ce nombre n'est pas necessairement fixe, il peut augmenter ou diminuer 
en cours d'execution de 1' application. C'est pourquoi il convient, plutot que d'ecrire une 
valeur fixe (comme nous avons pu le faire au cours des deux exemples precedents), 
d'utiliser la propriete length. 

La propriete length d'un tableau indique a tout moment la longueur du tableau, c'est-a- 
dire le nombre d'elements contenus dans un tableau. 



Remarque 

Si Ton suppose qu'un tableau a pour longueur nbEl ements, le premier element d'un tableau est place a 
l'indice o et le dernier se situe a l'indice nbEl ements -l. 
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La syntaxe d' utilisation de cette propriete est la suivante : 

• Pour un tableau a une dimension 

II suffit d'appliquer la propriete 1 ength au nom du tableau en utilisant la notation « . », 
comme suit : 

var desPersonnes= ["Elena", 12, "Nicolas", 9, "Pablo", 16]; 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 

La commande trace( ) affiche : 



La longueur du tableau desPersonnes vaut : 6 



• Pour un tableau a deux dimensions 

La longueur correspondant au nombre de lignes s'effectue en appliquant directement 
la propriete 1 ength au nom du tableau. 

En revanche, pour connaitre la longueur d'une ligne, la technique consiste a appliquer 
la propriete length aux elements donnant acces aux lignes du tableau, en utilisant les 
crochets comme suit : 

var 1 igneO:Array = ["Elena", "Nicolas", "Pablo"]; 

var lignel:Array = [12, 9, 16]; 

var tableau:Array = [ligneO, lignel]; 

trace ("Le tableau a " + tableau. length + " lignes "); 

trace ("Longueur de la premiere ligne : " + tableau[0] .length) ; 

La premiere instruction traceO affiche le nombre de lignes du tableau, soit 2. La 
seconde affiche la longueur de la premiere ligne, soit 3. 

Question 

Comment utiliser la propriete l ength dans les deux exemples de parcours de tableaux precedents ? 
Reponse 

Dans le premier exemple, la boucle doit s'arreter un element avant la fin du tableau pour eviter de sortir 
des limites du tableau. En effet, si i valait desPersonnes . 1 ength, I'affichage de I'element [i+1] pose- 
rait probleme. Nous devons done ecrire : 

for (var i:uint = 0; i < desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

Dans le second exemple, la premiere boucle examine toutes les lignes enregistrees dans tableau grace 
au test i < tableau. length. La boucle interne j parcourttous les elements d'une ligne grace au test 
j < tableau[i]. length de facon a calculer la longueur de la ligne traitee, a chaque tour de la 
boucle i . Les deux boucles imbriquees s'ecrivent : 

for (var i:uint = 0; i< tableau. length; i++ ) { 

for (var j:uint = 0; j< tableau[i]. length; j++ ) { 

tracer tableau ["+i+"] ["+j+"] = " +tableau[i ] [j] ) ; 

} 

} 
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Nommer les elements du tableau 

ActionScript autorise de nommer les elements d'un tableau plutot que de les numeroter 
par un indice. La syntaxe est la suivante : 

nomDuTableau[nomDeLelement] = valeur; 

oil nomDeLelement est une chaine de caracteres et non une valeur numerique. Ainsi, nous 
pouvons par exemple ecrire : 

var age:Array = new ArrayO; 
age["Elena"] = 12; 
age["Nicolas"] = 9; 
age["Pablo"] = 16; 

Le tableau age doit obligatoirement etre cree par le constructeur Array( ) avant de pouvoir 
inserer des elements nommes. Ensuite, les instructions : 

var quel Age:uint = age["Pablo"] ; 
| traceCPablo a "+ quelAge + " ans "); 

affiche dans la fenetre de sortie, le message suivant : 
Pablo a 16 ans 

Pour recuperer la valeur enregistree a l'interieur d'un element, il est necessaire de 
connaitre l'identiriant de l'element, sous peine de ne jamais pouvoir y acceder. 

La suppression d'un element nomme s'effectue par la commande delete, de la facon 
suivante : 

delete age["Pablo"]; 

Nommer les elements d'un tableau plutot que les numeroter permet de rendre le code 
plus lisible et surtout d' acceder a un element d'un tableau sans connaitre sa position. 

En ActionScript, l'acces a un element nomme ne peut s'effectuer autrement que par 
l'identiriant. II n'est pas possible d'y acceder par un nombre ni d'utiliser les methodes 
d'ajout, de suppression et de tri proposees par le langage (voir section ci-apres). 

Les outils proposes par ActionScript 

Un tableau est une liste d' elements creee et initialisee en debut de programme, qui 
evolue en cours d' execution de 1' application. Le nombre d' elements peut augmenter ou 
diminuer en fonction des actions de l'utilisateur. Les elements peuvent egalement 
changer de place, passer du premier indice au dernier ou encore etre tries dans un ordre 
donne. 

Toutes ces manipulations (ajout, suppression, tri...) sont des operations courantes que 
Ton peut realiser simplement en utilisant les fonctions predefinies du langage Action- 
Script. 
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Nous decrivons ci-dessous, regroupees par theme, une grande partie des methodes defi- 
nies pour gerer les objets de type Array. Nous donnons, en exemple, pour chaque theme, 
un programme qui utilise ces methodes. 

L'ajout d'elements 



Operation 


Methode 




Ajoute les elements passes en parametre, a la fin du tableau 
sur lequel est appliquee la methode. 


pushtelementl, element2, ...) 


Insere les elements passes en parametre, au debut du 
tableau sur lequel est appliquee la methode. 


unshifttelementl 


element2, ...) 


Supprime, ajoute ou remplace des elements du tableau en 
fonction des parametres passes. Le premier parametre 
aPartirDe indique I'indice de I'element a partir duquel 
la modification doit s'effectuer, le second parametre 
nbEl ement indique le nombre d'elements a supprimer. Si ce 
dernier vautO, aucun element n'estsupprime, et les parame- 
tres suivants sontinseres en fonction de aParti rDe. 


spl i ce(aParti rDe, nbElement, 
elementl, element2, ...) 


Retourne dans un nouveau tableau les elements du tableau 
sur lequel est appliquee la methode, suivis des elements four- 
nis en parametre. 


concat(el ementl , 


element2, ...) 



Exemples 

var desPersonnes :Array = new Arrayt "El ena" , 12 , "Nicolas", 9, "Pablo", 16); 
var desAmi s : Array = ["Garance", 12, "Elliot", 9]; 

trace(" "); 

//© Ajouter un element en modi fi ant length directement 
desPersonnes[12] = "Lamy"; 
desPersonnes[13] = 21; 

trace( "Ajouter un element en modifiant length"); 
for (var iiuint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 

trace(" "); 

//© Ajouter des elements avec pushO 
desPersonnes. pushC'Isis", 18); 
trace( "Ajouter des elements avec pushO"); 
for (var iiuint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 



trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 
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trace( " " ) ; 

//© Ajouter des elements avec unshiftO 

desPersonnes .unshift( "El sa" , 22) ; 

trace( "Ajouter des elements avec unshiftO"); 

for (var i : ui nt = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 



trace(" ") ; 

//© Ajouter des elements avec spliceO 

desPersonnes .spl i ce(10,0, "Cilou" ,21) ; 

trace ("Ajouter des elements avec spliceO"); 

for (var i : ui nt = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 



trace( " " ) ; 

//© Ajouter des elements avec concatO 

var nouveauAmis = desPersonnes. concat(desAmis) ; 

trace( "Ajouter des elements avec concatO"); 

for (var i : ui nt = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 



trace( " " ) ; 

traceC'Le tableau nouveauAmis apres concatenation"); 
for (var i : ui nt = 0; i< nouveauAmis. length-1; i+=2 ) { 

trace(nouveauAmis[i ] + " a " + nouveauAmi s[i+l] + " ans"); 

} 

trace ("La longueur du tableau nouveauAmis vaut : " + nouveauAmis. length) ; 



Extension web 

Vous pourrez tester cet exemple en executant le fichier AjouterElements.fi a, sous le repertoire 
Exempl es/chapi tre6. 
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Resultat de I'execution 

L' execution du programme AjouterElements.fi a a pour resultat d'afficher les messages 
suivants dans la fenetre de sortie : 



Ajouter un element en modi fi ant length 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

undefined a undefined ans 

undefined a undefined ans 

undefined a undefined ans 

Lamy a 21 ans 

La longueur du tableau desPersonnes vaut : 14 

O Sans utiliser les methodes proposees par ActionScript, il est possible d' ajouter des 
elements a un tableau en modifiant simplement la taille de ce dernier. Ici, nous avons cree 
deux nouveaux elements aux indices 12 et 13, alors qu'aucun n'etait defini apres 
l'indice 5. Le lecteur Flash cree de lui-meme les six elements manquants et les insere en 
tant que undefined entre les elements initiaux et les deux elements ajoutes. La taille du 
tableau augmente automatiquement de 8. 



Ajouter des elements avec pushO 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

undefined a undefined ans 

undefined a undefined ans 

undefined a undefined ans 

Lamy a 21 ans 

Isis a 18 ans 

La longueur du tableau desPersonnes vaut : 16 



© La methode push( ) ajoute les deux elements passes en parametres (Isis et 18) a la fin 
du tableau desPrenoms. La taille du tableau augmente automatiquement de 2. 



Ajouter des elements avec unshiftO 
Elsa a 22 ans 
Elena a 12 ans 
Nicolas a 9 ans 
Pablo a 16 ans 
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undefined a undefined ans 
undefined a undefined ans 
undefined a undefined ans 
Lamy a 21 ans 
Isis a 18 ans 

La longueur du tableau desPersonnes vaut : 18 

I I 

© La methode unshiftO ajoute les deux elements passes en parametres (Elsa et 22) au 
debut du tableau desPrenoms. La taille du tableau augmente automatiquement de 2. 



Ajouter des elements avec spliceO 

Elsa a 22 ans 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

undefined a undefined ans 

Cilou a 21 ans 

undefined a undefined ans 

undefined a undefined ans 

Lamy a 21 ans 

Isis a 18 ans 

La longueur du tableau desPersonnes vaut : 20 

© Les parametres Cilou et 21 sont inseres dans le tableau a partir de la 10 e position, le 
premier parametre valant 10 et le second 0. La taille du tableau augmente automatiquement 
de 2. 



Ajouter des elements avec concatO 

Elsa a 22 ans 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

undefined a undefined ans 

Cilou a 21 ans 

undefined a undefined ans 

undefined a undefined ans 

Lamy a 21 ans 

Isis a 18 ans 

La longueur du tableau desPersonnes vaut : 20 
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Le tableau nouveauAmis apres 


concatenation 


Elsa a 22 ans 




Elena a 12 ans 




Nicolas a 9 ans 




Pablo a 16 ans 




undefined a undefined ans 




Cilou a 21 ans 




undefined a undefined ans 




undefined a undefined ans 




Lamy a 21 ans 




Isis a 18 ans 




Garance a 12 ans 




Elliot a 9 ans 




La longueur du tableau nouvet 


luAmis vaut : 24 



© Les contenus des tableaux desPersonnes et desAmis sont places les uns apres les autres 
dans le tableau nouveauxAmis, grace au signe d' affectation. Les deux tableaux desPersonnes et 
desAmi s restent inchanges. 

La suppression d'elements 



Operation 


Methode 


Extrait le dernier element du tableau sur lequel est appliquee la 
methode. La valeur de cet element est retournee et le tableau est 
reduit d'un element. 


pop( ) 


Extrait le premier element du tableau sur lequel est appliquee la 
methode. La valeur de cet element est retournee et le tableau est 
reduit d'un element. 


shiftO 


S upprime, ajoute ou remplace des elements du tableau en fonction 
des parametres passes. Le premier parametre aPartirDe donne 
I'indice de I'element a partir duquel la modification doit s'effectuer, 
le second, nbElement, indique le nombre d'elements a supprimer. 
Si ce dernier est superieur a 0, la methode supprime le nombre 
d'elements indique par nbElement. Si nbElement est omis, I'ele- 
ment a Parti rDe etson suivantsontsupprimes. 


spl i cetaParti rDe, nbElement) 


L'operateur delete met a undefined le contenu d'un element 
sans le supprimer. 


del ete 





Remarque 

L'operateur delete supprime definitivement un element nomme et efface seulement le contenu d'un 
element numerate (voir section « Nommer les elements du tableau » cl-dessus). 
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Exemples 

var desPersonnes :Array = new Array( "El ena" , 12, "Nicolas", 9, 

"Pablo", 16,"Garance", 12, 
"Elliot", 9, "Lamy", 21, "Isis", 18); 



trace( " " ) ; 

trace("Le tableau initial desPersonnes "); 

trace( " " ) ; 

for (var i:uint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 
trace(" ") ; 



//© Supprimer des elements avec length 

desPersonnes. length = 12; 

trace( "Supprimer des elements avec length "); 



for (var i:uint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 
trace( " " ) ; 



//© Effacer des elements avec delete 

delete desPersonnes[10] ; 

delete desPersonnes[ll] ; 

trace( "Effacer des elements avec delete "); 



for (var i:uint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i ] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 
trace( " " ) ; 



//© Supprimer des elements avec pop() 
desPersonnes .pop( ) ; 
desPersonnes .pop( ) ; 

trace( "Supprimer des elements avec pop()"); 



for (var i:uint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i] + " a " + desPersonnes[i+l] + " ans"); 

} 

trace ("La longueur du tableau desPersonnes vaut : " + desPersonnes. length) ; 
trace(" ") ; 

//© Supprimer des elements avec shiftO 
desPersonnes. shift( ) ; 
desPersonnes . shi f t( ) ; 

trace( "Supprimer des elements avec shiftO"); 

for (var i:uint = 0; i< desPersonnes. length-1; i+=2 ) { 

trace(desPersonnes[i] + " a " + desPersonnes[i+l] + " ans"); 

} 
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trace ("La longueur du tableau desPersonnes vaut 
tracet " 



+ desPersonnes . 1 ength) ; 
"); 



//© Supprlmer des elements avec spliceO 
desPersonnes.spl ice (2, 4) ; 

tracet "Supprimer des elements avec spliceO"); 
for (var i:uint = 0; i< desPersonnes . 1 ength-1 ; i+=2 
trace(desPersonnes[i ] + " a " + desPersonnes[i+l] 

} 

trace ("La longueur du tableau desPersonnes vaut 
tracet " 



ans" ) ; 



+ desPersonnes . 1 ength) ; 



Extension web 

Vous pourrez tester cet exemple en executant le fichier SupprimerElements.fi a, sous le repertoire 
Exemples/chapitre6. 



Resultat de I'execution 

L' execution du programme SupprimerEl ements . f 1 a a pour resultat d'afficher les messages 
suivants, dans la fenetre de sortie : 





Le tableau initial desPersonnes 


Elena a 12 ans 






Nicolas a 9 ans 






Pablo a 16 ans 






Garance a 12 ans 






Elliot a 9 ans 






Lamy a 21 ans 






Isis a 18 ans 






La longueur du tableau desPersonnes 


vaut 


14 


Supprimer des elements avec length 






Elena a 12 ans 






Nicolas a 9 ans 






Pablo a 16 ans 






Garance a 12 ans 






Elliot a 9 ans 






Lamy a 21 ans 






La longueur du tableau desPersonnes 


vaut 


12 
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O Sans utiliser les methodes proposees par ActionScript, il est possible de supprimer des 
elements du tableau, en modifiant simplement la taille de ce dernier. La taille initiale du 
tableau vaut 14. En modifiant la taille a 12, nous supprimons automatiquement les deux 
derniers elements du tableau. 



Effacer des elements avec delete 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

Garance a 12 ans 

Elliot a 9 ans 

undefined a undefined ans 

La longueur du tableau desPersonnes vaut : 12 

© La commande del ete a pour effet d'effacer l'information enregistree a l'indice indique 
entre crochets, sans pour autant la supprimer de la memoire. Ainsi, la taille du tableau 
reste identique, les elements concernes sont undefined. 



Supprimer des elements avec pop() 

Elena a 12 ans 

Nicolas a 9 ans 

Pablo a 16 ans 

Garance a 12 ans 

Elliot a 9 ans 

La longueur du tableau desPersonnes vaut : 10 

© La methode pop( ) est appelee deux fois arm de supprimer les deux derniers elements 
du tableau desPrenoms. La taille du tableau diminue automatiquement de 2. 



Supprimer des elements avec shiftO 
Nicolas a 9 ans 
Pablo a 16 ans 
Garance a 12 ans 
Elliot a 9 ans 

La longueur du tableau desPersonnes vaut : 8 

© La methode shiftO est appelee deux fois afin de supprimer les deux premiers 
elements du tableau desPrenoms. La taille du tableau diminue automatiquement de 2. 
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Supprimer des elements avec spliceO 
Nicolas a 9 ans 
Elliot a 9 ans 

La longueur du tableau desPersonnes vaut : 4 



© Le premier parametre indique l'indice a partir duquel les elements sont supprimes et le 
second le nombre d'elements a supprimer. Ici, quatre elements (Pablo, 16, Garance et 12) 
sont detruits a partir de l'indice n° 2. La taille du tableau diminue automatiquement de 4. 

La manipulation de tableaux 



Operation 


Methode 


Inverse I'ordre de classement des elements du tableau sur lequel est appliquee la 
methode. 


reverse( ) . 


Effectue un tri alphabetique sur les elements du tableau sur lequel est appliquee la 
methode. 


sort( ) . 


Extrait un ou plusieurs elements successifs du tableau sur lequel est appliquee la 
methode, sans en alterer la structure. 


slicetdebut, fin) 


Retourne une chaine de caracteres contenanttous les elements du tableau separes 
par un separateur fourni en parametre. 


join(separateur) 


Retourne une chaine de caracteres contenanttous les elements du tableau separes 
par une virgule. 


toStringt ) 



Exemples 

var desPersonnes :Array = new Arrayt "El ena" , "Nicolas", "Pablo", "Garance", 

"Elliot", "Lamy", "Isis"); 



trace("Le tableau initial desPersonnes "); 

trace(" "); 

for (var i:uint = 0; i< desPersonnes. length; i++ ) { 
trace("Je m'appelle " + desPersonnes[i ] ); 

} 



trace(" "); 

//O Inverser I'ordre du tableau 
desPersonnes . reverse ( ) ; 
trace( "Inverser I'ordre du tableau "); 
for (var i:uint = 0; i< desPersonnes. length; i++ ) { 
traceC'Je m'appelle " + desPersonnes[i ] ); 

} 



trace( " " ) ; 

//© Trier le tableau dans I'ordre alphabetique 

desPersonnes .sort( ) ; 

traceCTrier le tableau dans I'ordre alphabetique "); 
for (var i:uint = 0; i< desPersonnes. length; i++ ) { 
traceC'Je m'appelle " + desPersonnes[i ] ); 

} 
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trace( " " ) ; 

//© Recuperer une partie du tableau dans un nouveau tableau 
var nouveauTabl eau = desPersonnes.slice(2, 6); 
trace( "Recuperer une partie du tableau dans un nouveau tableau "); 
for (var i:uint = 0; i< nouveauTableau. length; i++ ) { 
trace("nouveauTableau = " + nouveauTabl eau[i ] ); 

} 



trace( " " ) ; 

//© Recuperer le contenu du tableau dans une chaine de caracteres 

var listeDePrenomiString = nouveauTableau. joint" | "); 

traceCLa liste des prenoms apres slicet) et joint) : "+ 1 isteDePrenom) ; 



tracet " " ) ; 

//© Recuperer le contenu du tableau dans une chaine de caracteres 
var listeDePrenomTrieeiString = desPersonnes.toStringt ) ; 

trace("La liste de tous les prenoms tries apres toStringt) : "+ 1 isteDePrenomTriee) ; 
tracet " " ) ; 



Extension web 

Vous pourrez tester cetexemple en executant le fichier TransformerTableau.fi a, sous le repertoire 
Exemples/chapitre6. 



Resultat de I'execution 

L'execution du programme TransformerTableau.fla a pour resultat d'afficher les messages 
suivants, dans la fenetre de sortie : 



Le tableau initial desPersonnes 



Je m'appelle Elena 

Je m'appelle Nicolas 

Je m'appelle Pablo 

Je m'appelle Garance 

Je m' appel 1 e El 1 iot 

Je m'appelle Lamy 

Je m'appelle Isis 



Inverser l'ordre du tableau 

Je m'appelle Isis 

Je m'appelle Lamy 

Je m'appelle Elliot 

Je m'appelle Garance 

Je m'appelle Pablo 

Je m'appelle Nicolas 

Je m'appelle Elena 
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O L'ordre des elements du tableau desPersonnes s'est inverse. Isis est passee en pre- 
miere position, Elena en derniere, ainsi que toutes les positions intermediaries. 



Trier le tableau dans l'ordre alphabetique 

Je m'appelle Elliot 

Je m'appelle Elena 

Je m'appelle Garance 

Je m'appelle Isis 

Je m'appelle Lamy 

Je m'appelle Nicolas 

Je m'appelle Pablo 

© Les elements du tableau sont tries dans l'ordre alphabetique. Attention, les capitales 
passent avant les minuscules, ce qui fait que le mot « Wagon » se situe avant le mot 
« train » par exemple. 

Remarque 

II est possible de modifier les regies de tri de fagon a organiser les elements d'un tableau dans un ordre de 
notre choix (ordre alphabetique ascendant, descendant, ordre numerique, ordre relatif a la taille des 
objets... ). Pour cela, les regies de tri doivent etre definies a I'interieur d'une fonction, laquelle est passee 
en parametre de la methode sort. 







Recuperer une partie du tableau dans un nouveau tableau 




nouveauTableau [0] = Garance 




nouveauTableau [1] = Isis 




nouveauTableau [2] = Lamy 




nouveauTableau [3] = Nicolas 





© Les quatre elements du tableau desPersonnes, comptes a partir du deuxieme 
element (slice(4, 2)), sont extraits du tableau et enregistres dans le tableau 
nouveauTabl eau. 



La liste des prenoms apres sliceO et joint) : Garance | Isis | Lamy | Nicolas 
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O Tous les elements de nouveauTableau sont enregistres dans une chaine de caracteres, 
du premier au dernier element. Chaque element est separe par le caractere « | » 
comme specifie en parametre de la methode join( ). 



La liste de tous les prenoms tries apres toStringO : 
El 1 i ot. El ena.Ga ranee, Isis.Lamy, Nicolas, Pablo 

© Tous les elements du tableau desPersonnes sont enregistres dans une chaine de carac- 
teres. Ici, il n'y a pas de choix possible pour le caractere de separation, la methode 
toString( ) separe les elements du tableau avec le caractere « , ». 

Le trombinoscope - 2? version 

L'objectif est ici de modifier et d'ameliorer le trombinoscope l re version en integrant les 
notions apprises au cours de ce chapitre. Le nouveau trombinoscope utilise des tableaux 
et propose quatre fonctionnalites supplementaires : 

• l'affichage du prenom et de l'age des personnes ; 

• l'ajout d'une nouvelle photo ; 

• la suppression d'une photo ; 

• le tri des photos par ordre alphabetique du prenom. 

Cahier des charges 

Le trombinoscope 2 e version se presente sous la forme suivante : 




Figure 6-5 



Le trombinoscope 2 e version 
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Fonctionnalites 

Les photos se placent horizontalement, les unes a la suite des autres. Si le nombre de 
photos ne permet pas l'affichage sur une seule ligne, l'application place les photos sur 
plusieurs lignes comme le montre la figure 6-5. 

Lorsque le curseur de la souris survole une des photos, une bulle apparait indiquant le 
prenom et l'age de la personne representee sur la photo. 

Les boutons a j outer, trier et supprimer sont places dans le has de la scene. lis permettent 
respectivement : 

• D'ajouter une nouvelle personne a la liste. Lorsque l'utilisateur clique sur ce bouton, 
un panneau demandant la saisie du prenom et de l'age de la personne apparait. 
La nouvelle photo s'affiche a la suite des precedentes, apres validation de la saisie. 

• D'afficher dans l'ordre alphabetique la liste des personnes enregistrees. 

• De supprimer une personne de la liste. Apres avoir clique sur le bouton supprimer, 
l'utilisateur choisit l'element a supprimer en cliquant sur la photo correspondante. 
Le bouton supprimer reste enfonce tant que l'utilisateur n'a pas selectionne la photo a 
effacer. 

Structure associee aux prenoms 



Extension web 

Vous pourrez examiner la structure des donnees ainsi que les symboles proposes pour cet exemple dans 
le fichier TrombinoscopeV2.fl a, sous le repertoire Exemples/chapitre6. 

Le trombinoscope nouvelle version met en jeu plusieurs types de donnees : des photos, 
des listes de noms et de valeurs numeriques. II existe differentes facons d'organiser ces 
informations et selon la structure des donnees choisie, la charpente generale de l'application 
sera differente. Pour notre exemple, nous choisissons : 

• De definir la liste des prenoms et celle des ages, a l'aide de deux tableaux distincts, 
l'un pour les prenoms (nomme prenoms), l'autre pour les ages (nomme ages) comme 
suit : 

//Le tableau des prenoms 

var prenoms : Array = ["Elena", "Marine", "Margoline", "Lamy", 
"Nicolas", "Ivan", "Isis", 
"Pablo", "Annabel"]; 

//Le tableau des ages 

var ages:Array = Array(12, 28, 24, 20, 9, 19, 14, 19, 11, 16); 

La correspondance entre le prenom et l'age s'effectue grace a la position respective des 
elements. Si Elena a son prenom enregistre en position 0 dans le tableau des prenoms, 
alors son age est enregistre a l'indice 0 dans le tableau des ages. 

• D'enregistrer chaque photo sous le prenom de la personne. Par exemple, le fichier 
correspondant a la photo d'Elena a pour nom El ena . jpg, celui de Nicolas, Ni col as .jpg. 

Ainsi, avec cette facon de structurer les donnees, l'affichage des informations concernant 
Elena et l'acces a son fichier photo s'effectuent de la facon suivante : 

traceCJe m'appelle " + prenoms[0] + " et j'ai "+ age[0] +" ans"); 
trace ("nom du fichier image : " + prenoms[0] + ".jpg"); 
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La fenetre de sortie du lecteur Flash affiche alors les messages suivants : 



Je m'appelle Elena et j'ai 12 ans 
nom du fichier image : Elena.jpg 



Definition des objets graphiques 

De nouveaux symboles sont a ajouter au trombinoscope. Les boutons pour ajouter, 
supprimer ou trier les donnees, la bulle pour afficher le prenom et l'age d'une personne et 
enfin le tableau de saisie du prenom et de l'age de la personne que Ton souhaite inserer 
dans le trombinoscope. 

Chacun de ces symboles derinit un champ de saisie ou d'affichage qui lui est propre et 
qui, tout comme la structure des donnees, faconne 1' architecture de 1' application. Dans 
notre exemple, nous choisissons de definir : 

• Les trois boutons ajouter, trier et supprimer comme occurrences du meme symbole 
BoutonCl p. 



Figure 6-6 

Les differentes 
formes du symbole 
BoutonClp 



Occurrences 

de BoutonClp 

/\ 
aiouter tner 



Etat normal 



ajouter ^ tner 
Etat survole 



Le symbole BoutonClp est constitue de deux images-cles (voir figure 6-6) pour distin- 
guer l'etat survole de l'etat normal. II possede egalement une zone de texte dynamique 
nominee labelOut, afin d'y placer les mots ajouter, trier et supprimer en fonction du 
bouton traite. 

Le symbole BulleClp, pour afficher le prenom et l'age des personnes dans une bulle 
lorsque la souris survole leur photo. 



Figure 6-7 

Le symbole BulleClp 




Proprietes x ) Fitres 1 Parametral 
| Texte dynamique ^1 
| labelOut 

L:[9o\3 X :|37.8 
& H:f6ll y : |-69.7 
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Le symbole BulleClp possede une zone de texte dynamique nommee label Out, ce qui 
permet de modifier les donnees prenom et age en fonction de la position du curseur. 

• Le symbole SaisirNomAgeClp, utilise pour afficher le panneau de saisie du nom et de 
l'age de la personne lorsque l'utilisateur a choisi d'ajouter une nouvelle photo. 

Figure 6-8 



Le symbole Saisir- 
NomAgeClp 




Le symbole Sai si rNomAgeCl p possede trois zones d' interaction, les deux zones de texte 
de saisie nominees prenomln et ageln, pour entrer le prenom et l'age de la personne a 
ajouter, et le symbole BoutonOKCl p, nomme val i der, qui permet la validation de la saisie 
des valeurs lorsque l'utilisateur clique dessus. 

Marche a suivre 

La mise en place des nouvelles fonctionnalites s'effectue en quatre etapes que nous 
decrivons ci-apres. 

Remarque 

La suppression d'une image a I'aide du bouton Supprimer est traitee sous forme d'exercice (voir exer- 
cice 6-3 en fin de chapitre). 



Afficher une liste de photos 

La toute premiere etape consiste a afficher les photos en tenant compte de la nouvelle 
structure des donnees. 

L'acces aux photos ne se fait plus en fonction d'un numero (voir section « Le trombi- 
noscope - l re version » du chapitre 5, « Faire des repetitions »), mais en utilisant la liste 
des prenoms, enregistree dans le tableau prenoms. Laffichage des photos s'effectue selon 
la demarche suivante : 

O pour chaque element du tableau prenoms ; 

© creer un clip support et un chargeur pour la photo ; 

© charger la photo et la placer dans le conteneur ; 

© placer la photo a la suite de la precedente ; 

© si photo sort de la scene, la placer sur la ligne suivante. 

La marche a suivre decrite ci-dessus se traduit en ActionScript par la suite des instruc- 
tions suivantes : 

var prenoms : Array = ["Elena", "Marine", "Margoline", "Lamy", "Nicolas", 

"Ivan", "Isis", "Pablo", "Annabel"]; 
var posX:uint=0, posY:uint=0; 
var cettePhoto:PhotoClp; 
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var aCharger:Loader; 

//© Pour chaque prenom du tableau prenoms 
for (var i : ui nt = 0; i< prenoms. length; i++) { 

//© Creer un conteneur et chargeur pour chaque photo 

cettePhoto = new PhotoClpO ; 

aCharger= new Loader( ) ; 

//Charger la photo 

//© Charger la photo et la placer dans le conteneur 

aCharger .1 oad(new URLRequest( " . ./ Photos/ "+prenoms[i ]+" . jpg" ) ) ; 

cettePhoto. addChi 1 d(aCharger) ; 

//Afficher la photo 
addChild(cettePhoto) ; 

//© Placer chaque photo les unes derriere les autres 
// sur une ligne 

cettePhoto. x = (cettePhoto. width + ecartInterPhoto)*posX + 

ecartDuBordGauche; 
cettePhoto. y = (cettePhoto. height + ecartInterPhoto)*posY + 

ecartDuBordHaut; 

posX++; 

//© Lorsque la ligne sort de la scene. 

// passer a la ligne suivante. 

if (cettePhoto. x > largeur - 2*cettePhoto. width) { 

posX=0; 

posY++; 

} 

} 



Question 

Quel est le role des variables posX et posY ? 
Reponse 

La variable posX est utilisee pour positionner les photos le long de I'axe des x. E lie est initialised a 0 et, 
pour chaque photo placee, posX est incremented de l afin de positionner la photo suivante juste apres. 
Le calcul de la position suivante prend en compte la largeur de la photo. Lorsqu'une des photos sort 
de la scene, posX est de nouveau initialisee a 0. La proprietex de cettePhoto reprend la valeur 
ecartDuBordGauche, ce qui a pour consequence de placer la photo en debut de ligne. 
La variable posY est utilisee pour passer a la ligne en dessous. E lie est initialisee a 0. Lorsqu'une des 
photos sort de la scene, posY est incremented de l, ce qui ajoute a la propriete y de cettePhoto une 
hauteur de photo. 



Afficher une bulle d'info pour chaque photo 

La seconde etape a pour objectif d' afficher une infobulle lorsque la souris survole une 
photo. Les informations affichees sont le prenom et l'age de la personne correspondant a 
la photo survolee. Chaque photo affichee doit done etre en mesure de capfurer les evenements 
MouseEvent.M0USE_.0VER et MouseEvent.MOUSEJUT. 

La mise en place des gestionnaires des evenements MouseEvent.M0USE_.0VER et 
Mouse Event .MOUSE JUT s'effectue alors comme suit : 

© Pour chaque objet cettePhoto, definir son comportement lorsque le curseur de la souris 
survole une photo. Pour cela, creer le gestionnaire d'evenement MouseEvent.M0USE_0VER. 

© A l'interieur de celui-ci, creer l'objet parol e a partir du symbole bul 1 eCl p et le posi- 
tionner sur la photo. 
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© Afficher le texte « Je m'appelle ... et j'ai ... ans » dans l'infobulle en utilisant les 
tableaux prenoms et ages. L'affichage du prenom et du nom varie en fonction de la 
photo survolee, c'est-a-dire de la position qu'elle occupe dans le tableau prenoms. 

Pour cela, l'objet survole, c'est-a-dire e.currentTarget dans le gestionnaire corres- 
pondant, doit connaitre la place qu'il occupe dans le tableau prenoms. 

0 Nous devons done creer une propriete numPhoto, pour chaque objet cettePhoto cree 
arm de memoriser l'indice de la photo et done la position du prenom et de l'age dans 
leurs tableaux respectifs. 

© Utiliser la propriete numPhoto pour retrouver le prenom ainsi que l'age de la personne 
survolee, et afficher le texte « Je m'appelle ... et j'ai ... ans » correspondant. 

i Pour en savoir plus 

La definition de proprieties d'objet est etudiee plus precisement au chapitre 8, « Definir ses propres 
classes ». 

0 Definir le comportement de chaque cettePhoto lorsque le curseur de la souris ne survole 
plus la photo. Pour cela, creer le gestionnaire d'evenement MouseEvent.MOUSE_OVER 
afin de detruire et done d'effacer l'objet parole. 

La marche a suivre decrite ci-dessus se traduit, en ActionScript, par la suite des instructions 
suivantes : 

for (var i : ui nt = 0; i< prenoms. length; i++ ) { 
//Charger et positionner les photos 
//Voir section precedente 
//© Memoriser le numero de la photo 
cettePhoto. numPhoto = i; 

//Definir le gestionnaire MouseEvent.M0USE_0VER 
cettePhoto. addEvent Li stener(MouseEvent.MOUSE_OVER, auSurvol Photo) ; 
//© Lorsque le curseur de la souris survole la photo 
function auSurvol Photo(e:MouseEvent) :void { 
//Recuperer la photo qui recoit l'evenement 

var ci bl e : Movi eCl i p = e.currentTarget as MovieClip; 

//© Creer l'infobulle 

parole = new BulleClpO ; 

parole. x = cible.x + cible. width/2; 

parole. y = cible. y + cible. height/2; 

addChild(parole); 

//© et © Afficher dans l'infobulle le texte correspondant 

//a la photo survolee 

parole. labelOut. text = "Je m'appelle " + 

prenoms[cible.numPhoto]+ "\net j'ai "+ 

ages[cible.numPhoto]+" ans"; 

} 

//© Lorsque le curseur de la souris sort de la photo 

cettePhoto. addEventListener(MouseEvent.MOUSE_OUT, al ExterieurPhoto) ; 

//Lorsque le curseur sort de la photo 

function al ExterieurPhoto(eiMouseEvent) :void { 

//Effacer l'infobulle 

removeChild(parole) ; 

} 

} 
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Remarque 

L'affichage du texte s'effectue en plagant la chaTne « Je m'appelle " + prenoms[cible.numPhoto]+ 
"\net j'ai "+ ages[cible.numPhoto]+" ans », dans le champ de texte dynamique 1 abel In de 
I'objet parole. Le caractere \n est utilise pour forcer les caracteres suivants (et j'ai...) a passer a la 
ligne. 



Ajouterune nouvelle photo 

L'ajout d'une nouvelle photo dans le trombinoscope fait I'objet de la troisieme etape de 
notre marche a suivre. La mise en ceuvre de cette nouvelle fonctionnalite se decompose 
de la facon suivante : 



Extension web 

Le survol des boutons ajouter et trier ne fait pas appel a la structure de tableau, nous ne developpe- 
rons pas ici leur fonctionnement. Vous pourrez cependant examiner leur mise en place en etudiant le 
script associe au fichierTrombinoscopeV2.fla, sous le repertoire Exemples/chapitre6. 



O Une nouvelle photo est ajoutee a la suite des autres lorsque l'utilisateur clique sur le 
bouton ajouter situe en bas de la scene. Pour cela, nous devons creer et positionner 
un objet a jout a partir du symbole BoutonCl p. 

© Lorsque l'utilisateur clique sur le bouton ajouter, un panneau s'afhche permettant 
la saisie des donnees. II convient done de definir le gestionnaire MouseEvent.MOUSEJJP 
de la facon suivante : 

© Creer I'objet sai si r a partir du symbole Sai si rNomAgeCl p (voir figure 6-8) et l'affi- 
cher au centre de la scene. 

0 L'utilisateur saisit le prenom et l'age de la personne a ajouter, puis valide sa sai- 
sie en cliquant sur le bouton OK. Ce dernier a pour nom val i der (voir figure 6-8). La 
validation et l'enregistrement des donnees s'effectuent par consequent par 1' inter- 
mediate du gestionnaire d'evenement MouseEvent.MOUSEJJP applique a l'occurrence 
sai sir. val i der comme suit : 

© Le prenom et l'age de la personne a ajouter sont transmis au programme a 
l'aide des zones de texte prenomln et ageln, respectivement (voir figure 6-8). 
Ces nouvelles valeurs s'inserent en fin des tableaux prenoms et ages en utilisant 
la methode push( ). 



Remarque 

Le nom du fichier portant le prenom de la personne a ajouter doit se trouverobligatoirement 
dans le repertoire Photos se trouvantdans le repertoire courantde I'application. 



© Pour finir, une fois les valeurs saisies et inserees dans les tableaux, nous devons 
effacer le panneau Sai si r. 

© Le panneau efface, la nouvelle photo doit apparaitre. Pour cela il convient 
d'afficher la nouvelle liste de prenoms en recopiant l'integralite des instruc- 
tions decrites en section « Afficher une liste de photos » de ce chapitre. Pour 
simplifier le code, nous avons choisi de copier ces instructions a l'interieur 
d'une fonction et d'appeler cette derniere en lieu et place. La fonction 
s'appelle ici afficherLesPhotos( ). 
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ds= Pour en savoir plus 

La definition et I'appel de fonctions sont etudies en detail au cours du chapitre 7, « Les fonctions ». La crea- 
tion etla mise en place de la fonction afficherLesPhotos( ) sont etudiees plus precisementa la section 
« Le projet mini site » du chapitre 7. 

La marche a suivre decrite ci-dessus se traduit en ActionScript par la suite des instructions 
suivantes : 

//© Creer et positionner le bouton ajout 
var ajout:BoutonClp = new BoutonClpO; 
ajout. x = 4*ecartDuBordGauche; 
ajout. y = hauteur - 4*ajout. height; 
ajout.labelOut.text="ajouter" ; 
ajout. alpha = 0.8; 
ajout. buttonMode = true; 
addChild(ajout) ; 

//© Lorsque 1 'utilisateur clique sur le bouton ajout 
function onRelacheAjout(e:MouseEvent) :void { 

//© Afficher le panneau de saisie du prenom et de l'age 

var saisir:SaisirNomAgeClp = new Sai si rNomAgeClp( ) ; 

saisir.x = (largeur ) / 2; 

saisir.y = (hauteur ) / 2 ; 

addChild(saisir) ; 

//Definir un gestionnaire d'evenement M0USE_UP 
//pour le bouton saisir 

//© Lorsque 1 'utilisateur clique sur le bouton OK 

sai si r . val ider .addEventLi stener(MouseEvent .M0USE_UP, onVal ide) ; 

//Lorsque l'utilisateur clique sur le bouton OK 

function onVal ide( ) :void { 

//© Inserer en fin de tableau le prenom et l'age saisis 

prenoms. push (sai si r.prenomln. text) ; 

ages. push (Number (sai si r.ageln. text)) ; 

//© Effacer le panneau de saisie 

removeChild(saisir); 

//© Afficher a nouveau toutes les photos 
afficherLesPhotos( ) ; 

} 

} 

Trier les photos 

Pour finir, voici la quatrieme et derniere etape de la 2 e version du trombinoscope. II s'agit 
du tri des photos par ordre alphabetique des prenoms. La mise en ceuvre de cette nouvelle 
fonctionnalite est un peu plus subtile que les precedentes. 

En effet, les donnees « prenoms » et « ages » sont stockees dans deux tableaux distincts. 
Appliquer un tri sur le seul tableau des prenoms a pour consequence de modifier 1' ordre 
des prenoms, sans changer celui des ages. Nous devons done trouver une methode pour 
ordonner le tableau des ages de facon a obtenir la bonne correspondance prenom-age. 

Pour cela, la technique consiste a : 

O Enregistrer les ages dans un tableau nomme (ageNomme), afin de reconnaitre l'age 
d'une personne non plus par sa position dans le tableau, mais directement par le pre- 
nom (voir figure 6-9). 
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© Trier le tableau prenoms a l'aide de la methode sortO. 



Figure 6-9 

L'indice du tableau 
ageNomme est un 
prenom et non une 
valeur numerique. 



prenoms 



[ "Elena" ] 



Marine 



["Margoline"] 



% [ "Lamy" ] 

N i 



% ["Nicolas"] 



% "Ivan" 



ages 



12 



18 



22 



20 



14 



© La liste des prenoms etant triee, l'element ageNomme[prenoms[0]] correspond mainte- 
nant a l'age du premier prenom dans l'ordre alphabetique, et le suivant correspond a 
l'age du second prenom dans l'ordre alphabetique. Ainsi, pour obtenir une liste des 
ages correspondant a la liste des prenoms triee, il sufht de modifier le tableau ages 
facon a ce que chaque element ages[i ] prenne la valeur de ageNomme[prenoms[i ]]. 

© Le tri des prenoms et des ages est realise lorsque l'utilisateur clique sur le bouton Tri. 
Nous devons inserer les operations decrites de © a © dans le gestionnaire d'evenement 
MouseEvent.MOUSEJJP applique a l'objet tri. 

© II convient, une fois le tri effectue, d'afhcher a nouveau les photos pour les voir se 
presenter dans l'ordre alphabetique. Pour cela, nous faisons a nouveau appel a la 
fonction afficherLesPhotos( ). 

La marche a suivre decrite ci-dessus se traduit en ActionScript par la suite des instructions 
suivantes : 

//© Lorsque l'utilisateur clique sur le bouton tri 
tri .addEventListener(MouseEvent.MOUSE_UP, onRelacheTri ) ; 
function onRel acheTri ( e:MouseEvent) :void { 
//Creer un nouveau tableau ageNomme 
var ageNomme = new ArrayO; 

//© Chaque element du tableau a pour nom le prenom 
// A chaque prenom correspond l'age 
for(var i:uint = 0; i< prenoms. length; i++) { 
ageNomme [ prenoms [i ]]=ages[i ] ; 

} 

//© Trier dans l'ordre alphabetique le tableau prenoms 
prenoms. sortO; 
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//© Modifier le tableau ages en reprenant 
// le tableau ageNomme, les prenoms etant tries 
for(var i:uint = 0; i< prenoms. length; i++) { 
ages[i] = ageNomme[prenoms[i]]; 

} 

//© Afficher les photos 
afficherl_esPhotos( ) ; 



Memento 

Un tableau est constitute d'un nom et d'une suite a" elements utilises pour stocker chacun 
une valeur. Chaque element possede un numero unique qui permet de le retrouver. 

Creer un tableau 

• AvecArrayO 

var exemple: Array = new ArrayO; 



Cette instruction a pour resultat de creer un tableau nomme exemple ne contenant 
qu'une seule case vide. Alors que 1' instruction : 



a pour resultat de creer un tableau nomme prixDesPommes contenant trois elements de 
types differents. 

• Avec l'expression [] 

var prixDesPommes:Array = [12, "pommes", 3.5]; 

Cette instruction est equivalente a la precedente en creant egalement trois elements de 
types differents. 

• A deux dimensions 
Les instructions : 

var fruitiArray = [12, "pommes", 3.5]; 
var 1 egume: Array = [5, "carottes", 2.5]; 
var 1 isteCourse:Array = [fruit, legume]; 

ont pour resultat de creer un tableau de deux elements (lignes - fruit, legume) nomme 
1 isteCourse, contenant chacun un tableau constitue de trois elements (colonnes). 

Acceder aux elements d'un tableau 

L'acces a un element specifique d'un tableau s'effectue en placant derriere le nom du 
tableau le numero de l'indice entre crochets. 

La boucle for suivante : 



I 



var prixDesPomme:Arrays = new Array(12, "pommes", 3.5); 



for (var i:uint = 0; i < prixDesPommes . 1 ength; i++ ) { 
t race (prixDes Pommes [i ] ) ; 
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permet d'afficher chaque element du tableau prixDesPommes, en faisant varier l'indice i de 
0 a la longueur totale du tableau (prixDesPommes. length). 

Les deux boucles for imbriquees, qui suivent : 

for (var i:uint = 0; i< listeCourse. length; i++ ) { 

for (var j:uint = 0; j< 1 i steCourse[i ] . 1 ength ; j++ ) { 

traceC'listeCourse ["+i+"]["+j+"] = "+1 isteCourse [i][j]); 

} 

} 

ont pour resultat d'afficher les lignes et les colonnes du tableau 1 isteCourse. 

Modifier un tableau avec des methodes predefinies 

ActionScript propose differentes methodes permettant l'ajout, la suppression ou la trans- 
formation des elements d'un tableau. 

Ainsi, par exemple, dans la suite d'instructions : 

prixDesPommes .push ( "rouge" ) ; 
prixDesPommes . shi ft( ) ; 
prixDesPommes. reverset ) ; 

La methode push( ) ajoute l'element "rouge" en fin du tableau prixDesPommes. 

La methode shi ft( ) supprime le premier element du tableau prixDesPommes. 

La methode reverse( ) inverse les elements du tableau prixDesPommes, le premier se trouvant 
en derniere position, le dernier en premiere. 

Exercices 

L'objectif de cette serie d'exercices est d'ameliorer le jeu de bulles developpe au cours 
des chapitres precedents afin d'accroitre la complexite du jeu. Nous travaillons a la fois 
sur les tableaux et sur les differents types de boucles. 



Extension web 

Pourvous fa c iliter la tache, le fichier Exercice6.fl a, a partir duquel nous a lions trava iller, se trouve dans 
le repertoire Exercices/SupportPourRealiserl_esExercices/Chapitre6. Dans ce meme reper- 
toire, vous pouvez acceder aux differentes applications telles que nous souhaitons les voir fonctionner 
(Exercice6_l.swf a Exercice6_5.swf) une fois realisees. 



Nous souhaitons creer des niveaux de difficulte croissants de facon a ce que : 

• Quel que soit le niveau du joueur, une session lance, en tout et pour tout, 50 bulles. 

• Pour chaque session, le joueur obtient un score. Si ce dernier est meilleur que le precedent, 
le nombre de bulles lancees en meme temps, croit. 

• Les bulles sont de couleurs differentes. Le choix de la couleur de la bulle s'effectue en 
fonction de la valeur de la bulle qui sert au calcul du score. Le nombre de couleurs 
proposees depend du niveau du joueur. Au niveau 1, il n'y a que deux couleurs possibles, 
au niveau 2, trois couleurs. . . 
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Tableau a une dimension 
Exercice 6.1 

Au lancement du jeu, le joueur debute avec un niveau egal a 1. Deux bulles sont lancees 
en meme temps. Pour creer plusieurs bulles, vous devez : 

1. Creer et initialiser une variable ni veauJoueur a 1. Declarer un tableau 1 i steBul 1 e. 

2. Creer et initialiser a 0 une variable compteur de boucles (par exemple 1 ). 

3. A l'aide d'une boucle while et des deux variables precedentes, creer les deux bulles 
correspondant au niveau initial du joueur. Stocker la bulle ainsi creee dans le tableau 
li steBul le, a l'indice i. 

4. Placer chaque bulle au hasard sur la toute la largeur et au-dessus de la scene. 

5. Chaque bulle possede sa propre vitesse calculee au hasard entre 10 et 15. Pour cela 
inserer le code suivant, dans la boucle : 

1 i steBul 1 e[i ] . vitesse = Math. round ( Math . random( )*5) ; 

ou 1 i steBul 1 e[i ] correspond a la bulle courante dans la boucle de creation des bulles, 
et vitesse devient par 1' intermediate de la notation « . » une nouvelle propriete de 
l'objet 1 i steBul 1 e[i ]. Chaque bulle possede ainsi une vitesse specifique. 

ds= Pour en savoir plus 

La definition de propriete d'objet est etudiee plus precisementau chapitre 8, « Les classes etles objets », 
section « Construire et utiliser ses propres classes*. L'ajout d'une propriete est egalement traits au 
chapitre 9, « Les principes du concept objet », section « Les classes dynamiques ». 

6. Ann de verifier le bon fonctionnement de la boucle, nous allons afficher, a l'interieur 
des bulles, leur numero respectif. Pour cela : 

- Modifiez le symbole BulleClp en creant a l'interieur une zone de texte dynamique 
nommee label Out. 

- Pour chaque bulle creee, affichez son numero, c'est-a-dire le compteur de la 
boucle. 



Exercice 6.2 

Pour que chaque bulle se deplace vers le bas, nous devons definir un gestionnaire 
d'evenement pour chacune d' entre elles en imbri quant les gestionnaires d'evenements 
Event. ENTER_FRAME a l'interieur d'une boucle for. 

1. Reperez le gestionnaire d'evenement Event. ENTER_FRAME. Inserez ce gestionnaire a 
l'interieur d'une boucle for. La boucle doit etre executee tant que le compteur est 
inferieur ou egal au niveau du joueur. 

2. L'objet sur lequel s'applique le gestionnaire Event. ENTER_FRAME n'est plus bSavon, mais 
la bulle courante represents par 1 i steBul 1 e [ i ] . 

3. Modifiez Taction seDepl ace( ) de facon a ce que l'objet traiter par la methode corres- 
ponde a la bulle d'indice i . Pour cela vous devez faire appel a un objet ci bl e et recu- 
perer l'objet courant grace a la propriete currentTarget de l'evenement en cours de 
traitement. 

4. La bulle se deplace avec sa propre vitesse, et lorsqu'elle remonte, celle-ci doit etre 
recalculee. 
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Remarque 

Modifier le terme cetteBul le par cible. 
Exercice 6.3 

Lorsque vous stoppez le jeu en cliquant une seconde fois sur le curseur ou, lorsque vous 
avez termine une session, 1' ensemble des bulles doivent s'arreter. II est done necessaire 
de stopper le gestionnaire d'evenement pour toutes les bulles creees : 

• Lorsque la session est terminee. 

• Lorsque le joueur clique sur le curseur pour interrompre momentanement le jeu. 
Pour cela, vous devez, a l'aide d'une boucle for : 

1. Supprimer l'ecouteur d'evenement Event. ENTER_FRAME pour chaque bulle de la liste. 

2. Placer a nouveau chacune des bulles au hasard sur la toute la largeur et au-dessus de 
la scene et recalculer une nouvelle vitesse. 

Exercice 6.4 

Chaque bulle possede son propre coefficient variant entre 0 et 5. Le score correspond a 
1' accumulation des coefficients pour chaque bulle touchee par le curseur. Si le coefficient 
d'une bulle vaut 5, le score est decrements de 5 points. 

1. En reprenant le principe de la propriete vitesse, creez une propriete valeur et definir 
pour chaque bulle, un coefficient specifique a la bulle courante. 

2. Afficher le coefficient associe a chaque bulle a la place du numero de la bulle. 

3. A l'interieur de la methode seDepl ace( ), calculer le score en accumulant le coefficient 
de la bulle courante (ci bl e. val eurBul 1 e) a chaque fois que le curseur touche une bulle. 

4. Lorsque la bulle n'est pas touchee, le score est decrements de la valeur de la bulle. 

5. Pour chaque bulle remontant au-dessus de la scene, calculer et afficher son nouveau 
coefficient. 

Exercice 6.5 

Le jeu passe a un niveau superieur lorsque le joueur ameliore son score. 

Reperez la structure de test qui permet de savoir si l'utilisateur a ameliore son score par 
rapport a la session precedente et, a l'interieur de cette structure : 

1. Incrementer la variable niveauJoueur. 

2. Ajouter une nouvelle bulle a la liste de bulles, en utilisant comme indice de tableau la 
valeur incrementee de niveauJoueur. 

3. Placer la nouvelle bulle au hasard sur la toute la largeur et au-dessus de la scene. 

4. Calculer une vitesse de deplacement et un coefficient afin d' initialiser les proprietes 
vitesse et valeur respectivement. 

5. Afin de connaitre le niveau du joueur, creer sur la scene une nouvelle zone d'affi- 
chage a l'aide du symbole AfficherClp comme le montre la figure 5-9. 
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Figure 6-10 




Le coefficient est 
affiche a Vinterieur 
de la bulle, la zone 
Niveau indique le 
degre de difficulte 
du jeu. 



Exercice 6.6 

L'objectif de cet exercice est de modifier le jeu de bulles de facon a afficher des bulles 
avec des couleurs differentes en fonction de leur valeur. Pour realiser la correspondance 
entre la valeur de la bulle (valeur tiree au hasard) et la couleur, la technique consiste a 
definir une liste de couleurs dans un tableau et d'obtenir la couleur d'une bulle en utilisant 
l'indice du tableau de couleurs. 

1. Definissez un tableau 1 i steCoul eurs compose de 10 elements. Chaque element decrit, 
sous la forme d'une chaine de caracteres, une valeur hexadecimale representant une 
couleur. 

ds= Pour en savoir plus 

La manipulation des couleurs est expliquee au chapitre 3, « Communiquer ou interagir », section « Les 
techniques de programmation incontournables », paragraphe « Le curseur change de couleur*. 

2. Reperez dans le code les instructions qui calculent la valeur de la bulle. Modifier ces 
instructions de sorte que la valeur tiree au hasard varie entre 0 et le niveau du joueur 
- le nombre de couleurs proposees dependant du niveau du joueur. 

3. Definissez un objet de type ColorTransform, en utilisant l'operateur new. Nommez-le 
uneCoul eur. 

4. A l'aide de la propriete col or, initialiser la couleur de la bulle a l'aide du code couleur 
enregistre dans le tableau 1 isteCouleurs, a l'indice correspondant a la valeur de la 
bulle. 

5. Creez un objet objetAcolorier de type Transform, afin de realiser l'association objet a 
colorier et couleur de coloriage. Le parametre place entre parentheses de Transform( ) 
indique la bulle a colorier. 



Remarque 

Attention, le coloriage d'une bulle doit etre effectue a differents moments : 

• Lors de la creation des bulles. 

• Lorsque les bulles sontreplacees en hautde la scene. 

• Quand I'utilisateur change de niveau. 
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Exercice 6.7 

L'objectif de cet exercice est d'ajouter la fonctionnalite « Supprimer » au trombinoscope 
presente au cours de ce chapitre. Si l'utilisateur choisit de supprimer une photo du trom- 
binoscope, il doit tout d'abord cliquer sur le bouton Supprimer pour cliquer ensuite sur la 
photo qu'il souhaite effacer. Tant qu'une photo n'a pas ete selectionnee, le bouton 
Supprimer reste enfonce. 



Extension web 

Pour vous faciliter la tache, le fichier Exercice6_7.fl a a partir duquel nous allons travailler se trouve 
dans le repertoire Exercices/SupportPourRealiserl_esExercices/Chapitre6. Dans ce meme 
repertoire, vous pouvez acceder a ('application telle que nous souhaitons la voir fonctionner 
(Exerci ce6_7 . swf ) une fois realisee. 



La realisation de ces differentes fonctionnalites s'effectue a travers les etapes suivantes. 
Le bouton a bascule 

Le bouton Supprimer est un bouton a bascule. Reportez-vous au chapitre 4, «Faire des 
choix », section « Les techniques de programmation incontournables », paragraphe « Le 
bouton a bascule » pour sa mise en ceuvre. 

Quelques conseils, cependant : 

• Leffet bascule est realise par le gestionnaire d'evenement MouseEvent.MOUSEJJP. Creez 
une occurrence de BoutonClp nommee supprime ainsi qu'une variable drapeau nommee 
modeSupprimer, variant de true a f al se selon son etat. 

• Pour donner un effet bouton « normal » et « enfonce », le symbole BoutonClp definit 
deux images-cles haut et bas. Pour passer de l'une a l'autre, vous devez utiliser la 
methode gotoAndStopChaut") ou gotoAndStop( "bas" ). 

Suppression de I'element clique 

La suppression d'une photo s'effectue lorsque l'utilisateur clique sur celle-ci, sachant 
que le bouton Supprimer est enfonce. Vous devez done, a l'interieur du gestionnaire 
MouseEvent.MOUSEJJP, associe a la photo : 

1. Tester si le drapeau modeSupprimer est vrai, et si tel est le cas : 

- Supprimer, dans les tableaux prenoms et ages, I'element correspondant au numero 
de la photo. Vous pouvez utiliser la methode si i ce( ). 

- Afficher a nouveau les photos a l'aide de la fonction afficherl_esPhotos( ). 

2. Examiner le resultat. Que se passe-t-il lorsque vous supprimez une image ? Pour- 
quoi ? 

Amelioration de I'interactivite 

La mise en place du bouton Supprimer apporte quelque dysfonctionnement dans l'affi- 
chage des photos et la gestion des deux autres boutons. 

Lors de l'affichage de la liste de photos apres suppression de l'une d'entre elles, la 
derniere photo de la liste precedente reste affichee, puisque aucune autre ne vient la 
remplacer sur le niveau d'affichage correspondant. Pour corriger ce probleme : 
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1. Definissez un objet de type Sprite nomme boiteAphotos. A l'interieur de la fonction 
afficherLesPhotos( ), creez a l'aide de l'operateur new l'occurrence boiteAphotos et 
ajoutez-le a la liste d'affichage. 

2. Ajoutez les photos au conteneur boiteAphotos. 

3. Pour etre sur d'afhcher les photos correctement, supprimez le conteneur boiteAphotos 
au debut de la fonction afficherl_esPhotos( ). Pour cela vous devez verifier que le 
conteneur existe et, s'il existe vous devez le supprimer a l'aide de la methode 
removeChild( ). 

Si l'utilisateur clique sur le bouton Suppri mer, puis clique sur l'un des deux autres boutons 
sans selectionner de photo a supprimer, le bouton Supprimer doit revenir automatiquement a 
son etat normal. 

4. Pour cela, vous devez placer a l'interieur des gestionnaires MouseEvent.MOUSEJP des 
boutons ajout et tri, un test verifiant la valeur du drapeau modeSupprimer. Si celui-ci 
est vrai, vous devez revenir a l'image-cle haut de l'objet supprimer, et mettre le 
drapeau modeSupprimer a faux. 



Tableau a deux dimensions 

L'objectif est ici de comprendre le traitement des tableaux a deux dimensions ainsi que 
1' utilisation des boucles imbriquees. 

Exercice 6.8 

L' application a pour resultat d'afficher la scene suivante : 




Extension web 

Pour vous fac il iter la tache, le fichier Exercice6_4.fla a partir duquel nous allons trava iller se trouve 
dans le repertoire Exercices/SupportPourReal iserLesExercices/Chapitre6. Dans ce meme 
repertoire, vous pouvez acceder a I'application telle que nous souhaitons la voir fonctionner 
(Exercice6_4.swf) une fois realisee. 
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Pour realiser cette application, la methode est la suivante : 

1. Creez un tableau de 7 lignes, composees elles-memes de 7 elements (colonnes). 

2. A l'aide de boucles imbriquees, initialisez le tableau aux valeurs suivantes : 



1 0 0 


L 0 0 1 


0 1 0 


L 0 1 0 


0 0 1 


I 1 0 0 


1 1 1 


L 1 1 1 


0 0 1 


110 0 


0 1 0 


10 10 


1 0 0 


L 0 0 1 


Remarque 

L'ensemble des elements du tableau est initialise a o. Les valeurs l sontplacees en choisissantde faire 
evoluer astucieusement les indices du tableau a l'aide de boucles. 



3. Affichez les puces (voir la bibliotheque du fichier Exerci ce6_4 . f 1 a) a l'ecran en utili- 
sant l'operateur new et en calculant leur position en fonction des compteurs de 
boucles i et j . 

4. Rendez visible la puce positionnee en [1 ] [ j ] si l'element du tableau associe vaut 1, et 
invisible sinon. 

5. Definissez des gestionnaires MouseEvent.MOUSEJVER et MouseEvent.M0USE_0UT sur 
chacune des puces et, realisez l'effet d'enfoncement de la puce en passant de 
l'image-cle 1 a 2 et inversement lorsque le curseur entre ou sort de l'objet. 

Le projet mini site 

Jusqu'a present, il nous etait difficile d'afficher l'integralite du site en utilisant les diffe- 
rents modes de navigation. Nous n'avions que peu d'outils a notre disposition. Avec les 
tableaux, cette difficulte est en grande partie resolue. 

En effet, le fait de pouvoir stacker dans des tableaux les differents elements du site va 
nous permettre de les creer tres simplement a l'interieur de la boucle for, sans avoir a 
copier/coller des blocs d'instructions comme nous avons pu le faire jusqu'a maintenant. 

Ainsi, pour realiser l'affichage des pages, des rubriques et des mini rubriques, nous allons 
proceder en plusieurs etapes, tout en nous aidant des differents codes realises au cours 
des chapitres precedents. 

La premiere etape va consister a creer les differents elements du site dans des tableaux. A 
la fin de cette etape, le site presentera sa page d'accueil sous la forme de rubriques dispo- 
sers au hasard sur la scene. Le fait de cliquer sur le titre, nous permettra d'afficher a 
nouveau les rubriques au hasard sur la scene. Aucune animation n'est realisee a cette 
etape. 

Au cours de la seconde etape, nous allons mettre en place les differents evenements afin, 
par exemple, d'afficher la page d'accueil sous une forme animee, ou encore de visualiser 
l'affichage d'une page, apres un clic sur une rubrique. 
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Extension web 

Pour vous faciliter la tache, la mise en place des objets proposes dans cet exercice est definie dans le 
fichier ProjetChapitre6.fla situe dans le repertoire Projet/SupportPourReal iserLesExercices/ 
Chapitre6. Dans ce meme repertoire, vous pouvez acceder aux differentes etapes de construction 
de I'application telle que nous souhaitons la voir fonctionner en examinant les applications 
ProjetChapitre6_a .swf a ProjetChapitre6_d.swf. 



Creation et initialisation des elements du site 

L'objectif est ici de creer tous les elements du site de facon a afficher les rubriques au 
hasard sur la scene. Les pages et les mini rubriques sont creees mais ne sont pas visibles 
comme le montre la figure 6-11. 



Figure 6-12 

Les quatre rubriques 
s 'afftchent au hasard 
sur la scene. 





Afin de travailler sur les memes bases, nous vous proposons de declarer les objets 
suivants : 

var listeCouleursiArray = [0x016087, 0x660066, 0xCC0033, 0xFF9900]; 
var listeNoms: Array = ["Photos", "Animes", "Videos", "Infos"]; 
var 1 isteRubriques:Array = new Array(4); 
var listePages:Array = new Array(4); 
var listeMinis:Array = new Array(4); 

L'ordre des couleurs et des noms de rubrique a son importance. Ainsi par exemple, la 
couleur definie en indice 0 du tableau listeCouleurs, correspond a la couleur de la page 
Photos, puisque le terme "Photos " apparait a l'indice 0 du tableau 1 i steNoms. 

Les autres variables : 

var 1 argeurPage: uint = 1 argeurScene; 

var hauteurPage:uint = hauteurScene - 150; 

var finalXPageiuint = 0; 

var finalYPageiuint = 150; 

var largeurRubrique:uint = largeurScene/4; 

var hauteurRubrique:uint = hauteurScene - 150; 

var largeurMini :uint = 20; 

var hauteurMini :uint = 35; 

var final YMi ni : ui nt = 75; 

var final XMi ni : ui nt = largeurScene - ecartDuBord; 
sont utilisees pour definir la taille des elements et leur position sur la scene. 
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Les pages 

Sachant que les pages sont creees a l'aide de la boucle for suivante : 

for (i = 0; i < listePages. length; i++) { 
1 istePages[i ] = new SpriteO; 
listePages[i].x = finalXPage; 
listePages[i].y = finalYPage ; 

1 istePages[i] .graphics .begin Fi 11(1 isteCoul eurs[i ] , 1 ) ; 
listePages[i]. graphics. drawRecttO, 0, largeurPage, hauteurPage) ; 
1 istePages[i] .graphics .end Fil 1 ( ) ; 
listePages[i]. alpha = 0; 
addChild(listePages[i]) ; 

} 

Faites en sorte que les pages se positionnent au centre de la scene avec une largeur et une 
hauteur reduite au centieme de leur valeur par defaut. Chaque page est totalement trans - 
parente. 

Kg= Pour en savoir plus 

La mise en place d'une page transparente et centree sur la scene a ete etudiee au chapitre 4, « F a ire des 
choix », section « Le projet mini site - Afficher la page Animes ». 

Les rubriques 

En vous inspirant de la boucle for precedente, ecrivez une seconde boucle for pour creer 
les quatre rubriques du site. Chaque rubrique est positionnee au hasard sur la scene. 

ds= Pour en savoir plus 

Le positionnement d'une rubrique au hasard sur la scene a ete etudie au chapitre 4, « Faire des choix », 
section « Le projet mini site - A I'affichage de la page Accueil ». 

Les rubriques sont initialement transparentes. Pour tester la bonne marche du 
programme, il est preferable de garder pour l'instant les rubriques visibles. 

Les minis rubriques 

Ecrivez une troisieme boucle for pour creer et positionner les quatre mini rubriques du 
site en haut et a droite de la scene. Les mini rubriques sont initialement non visibles. Pour 
verifier leur bon positionnement, il est preferable de les garder visibles. 

Le titre 

La mise en place du titre est realisee de la meme facon que pour les exercices precedents. 
Cependant, lorsque l'utilisateur clique sur celui-ci, les rubriques s'affichent a de nouvelles 
positions tirees au hasard. Pour cela, vous devez : 

• Creer un gestionnaire d'evenement MouseEvent.MOUSEJJP sur l'objet siteTitre, dont 
Taction est cl icSurTitre( ). 

• Ecrire Taction cHcSurT1tre() afin de modifier les proprietes x et y de chacun des 
elements de la liste 1 isteRubriques. Les nouvelles valeurs sont calculees au hasard, 
comme lors de la creation des rubriques. 

Le titre reagit aux evenements MouseEvent.MOUSEJVER et MouseEvent.MOUSEJUT. Mettez en 
place les actions sur0ver( ) et sur0ut( ) etudiees au cours des chapitres precedents (section 
« Le projet mini site »). 
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Les transitions 

La mise en place des transitions entre les pages et les rubriques demande d'ajouter des 
gestionnaires d'evenements de type Event. ENTER^FRAME sur les rubriques ou encore sur les 
pages a afficher. 

Deplacer les rubriques 

L'ajout du gestionnaire d'evenement Event. ENTER_FRAME sur les rubriques s'effectue en 
inserant 1' instruction suivante : 

1 isteRubriques[i] . addEvent Li stenert Event. ENTER_FRAME, seDepl acerVers ) ; 

dans la boucle de creation des rubriques. 

L' action seDepl acerVers( ) reprend en bonne partie le code etudie en section « Le projet 
mini site - Deplacer les rubriques » du chapitre 4, « Faire des choix ». Examinons le bloc 
d' instructions qui fait l'essentiel du deplacement de la rubrique Animes. 

positionCouranteX = cible.x; 
positionCouranteY = cible.y; 

ecartX = finalXRubriqueAnimes - positionCouranteX; 

depl acementX= ecartX / 6; 

cible.x= positionCouranteX + deplacementX; 

ecartY = finalYRubriqueAnimes - positionCouranteY; 

depl acementY= ecartY / 6; 

cible.y= positionCouranteY + depl acementY ; 

Pour se deplacer, une rubrique, quelle qu'elle soit, a besoin de connaitre sa destination 
finale. Ici, la rubrique Animes a pour destination finale le point (finalXRubriqueAnimes, 
finalYRubriqueAnimes). 

La propriete numero 

Concretement, la destination finale d'une rubrique differe pour chaque rubrique. Elle 
depend de sa position lors de la definition des noms de rubrique. Ainsi, la rubrique : 

• Photos est definie a l'indice 0 du tableau listeNoms et sa position finale est 
(0*1 argeurRubri que, f i nal YPage). 

• Animes est definie a l'indice 1 du tableau listeNoms et sa position finale est 
(1*1 argeurRubri que, f i nal YPage). 

• Videos est definie a l'indice 2 du tableau listeNoms et sa position finale est 
(2*1 argeurRubri que, f i nal YPage). 

• Infos est definie a l'indice 3 du tableau listeNoms et sa position finale est 
(3*1 argeurRubri que, f i nal YPage). 

Comme nous pouvons le constater, il est possible d' afficher n'importe quelle rubrique 
des lors que nous connaissons son indice dans le tableau des noms de rubrique. 

En realite, cet indice est toujours le me me quel que soit le tableau. L'indice 0 correspond 
au theme Photos, pour une page, une rubrique ou une mini rubrique. L'indice 1 corres- 
pond au theme Animes, pour une page, une rubrique ou une mini rubrique, etc. 
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L' action seDepl acerVers( ) doit done etre en mesure de connaitre la valeur de l'indice de 
la rubrique a deplacer. Pour cela, nous devons ajouter, lors de la definition des rubriques, 
une nouvelle propriete nommee numero comme suit : 

for (i = 0; i < listeRubriques. length; i++) ( 
1 isteRubriques[i ] = new MovieClipO; 
listeRubriques[i]. numero = i; 

//Positionner les rubriques 

} 



Remarque 

L'ajoutde proprieties estune technique courante. Nous I'avons realise avec le trombinoscope pour afficher 
une infobulle propre a la photo survolee. Notez que I'objet cree n'est plus de type Sprite mais de type 
MovieCl ip. En effet, l'ajoutde proprietes n'est possible que sur les objets de type MovieCl ip. 



Une fois la propriete numero mise a jour, vous devez modifier Taction seDepl acerVers( ) de 
facon a calculer la position de la rubrique en fonction de son numero. Ce dernier est 
obtenu grace a l'expression cible. numero. Attention a bien modifier le type de la cible, 
pour qu'elle soit traitee en tant que MovieCl ip et non comme Sprite. 

Sensibiliser les rubriques 

Lorsque les rubriques sont placees a leur position definitive, elles deviennent sensibles 
aux evenements MouseEvent.MOUSEJVER et MouseEvent.MOUSEJUT. 

Mettez en place les actions surOverO et surOutO pour chacune d'entre elles des ce 
moment-la. II convient egalement de supprimer le gestionnaire Event. ENTER_FRAME afin de 
ne pas trap surcharger l'application. 

Cliquersur le titre 

Lorsque l'utilisateur clique sur le titre du site, les rubriques se repositionnent au hasard et 
se deplacent ensuite vers leur position definitive. Modifiez Faction cl icSurTitre( ) afin de : 

• Remettre en place l'ecouteur d'evenement Event . ENTER_FRAME pour chacune des rubriques. 

• Supprimer les gestionnaires MouseEvent.MOUSEJVER et MouseEvent.MOUSEJUT pour 
chacune des rubriques. 

• Rendre transparente les rubriques. 
Afficher une page 

Une page s'affiche lorsque l'utilisateur clique sur une rubrique. En vous aidant des 
programmes realises aux chapitres 4 et 5 pour le mini site, et en utilisant la meme demar- 
che que celle utilisee pour 1' animation des rubriques en section precedente : 

• Ajouter le gestionnaire d'evenement MouseEvent . MOUSE JP aux differentes rubriques lorsque 
celles-ci ont finis de se deplacer. L' action a mener est la fonction cl i cSurRubrique( ). 

• Modifier la fonction cl i cSurRubri que( ) de facon a centrer chaque page et diminuer leur 
taille. Ajouter le gestionnaire Event . ENTER_FRAME sur la page correspondant a la rubrique 
cliquee. Vous atteindrez cette page en utilisant l'expression 1 istePages [cible. numero]. 

• L' action menee par le gestionnaire Event. ENTER_FRAME est agrandirPageEnXC ). Elle 
deplace la page vers sa position finale sur l'axe des X et incremente sa largeur de 
40 pixels a chaque fois que I'objet se deplace. 



Collectionner des objets 



Chapitre 6 



• Lorsque la page a atteint sa position finale sur l'axe des X : 

- detruire le gestionnaire Event . ENTER_FRAME associe a Taction agrandi rPageEnXt ) ; 

- mettre en place un nouveau gestionnaire Event. ENTER_FRAME qui a pour action 
agrandi rPageEnY( ). Cette fonction deplace la page vers sa position finale sur l'axe 
des Y et incremente sa hauteur de 25 pixels a chaque deplacement. 

• Lorsque la page a atteint sa position finale sur l'axe des Y, detruire le gestionnaire 
Event. ENTER_FRAME associe a Taction agrandirPageEnY( ). 

Cliquer sur le titre 

Lorsque Tutilisateur clique sur le titre du site alors qu'une page est affichee, celle-ci 
disparait pour laisser place au deplacement des rubriques jusqu'a leur position finale. 

Modifiez Taction cl icSurTitre( ) afin de reinitialiser les pages pour les centrer, les diminuer 
et les rendre invisibles. 



Afficher les mini rubriques 

Les mini rubriques s'afhchent lorsque la page est entierement affichee. Utilisons Toutil 
dispatchEvent( ) pour realiser cet affichage. 

ds= Pour en savoir plus 

L'outil dispatchEventO ainsi que remission de I'evenement Event. COMPLETE ont ete etudie au 
chapitre 5, « Les repetitions », section « Le projetmini site - Afficher les vignettes ». 

• Mettez en place T emission de I'evenement Event. COMPLETE des que la page a fini de 
s' afficher. 

• Ajoutez Tecouteur d'evenement Event .COMPLETE pour chaque objet 1 istePage. L'action 
a mener est nommee afficherLesMinis( ). 

• Ecrivez la fonction af f i cherLesMi ni s ( ) de facon a ce que chaque mini rubrique devien- 
nent visible. Seule la mini rubrique correspondant a la page affichee reste invisible. 
Pour cela, vous devez connaitre le numero de la page affichee. Vous devez done ajouter 
une propriete numero a chacune des pages du site. 

Sensibiliser les mini rubriques 

Lorsque les mini rubriques sont affichees, elles deviennent sensibles aux evenements 
MouseEvent.MOUSEJVER et MouseEvent.MOUSE_OUT. Mettez en place les actions surOverO et 
surOut( ) pour chacune d'entre-elles des leur creation. 

Cliquer sur une mini rubrique 

Cliquer sur une mini rubrique a pour consequence d'afficher la page correspondante. 
Cette action est identique a celle realisee lorsque Ton clique sur une rubrique. 

II vous suffit done : 

• D'ajouter le gestionnaire MouseEvent . MOUSEJP a chacune des mini rubriques lors de leur 
creation, Taction a mener etant clicSurRubriqueO. 

• De creer une propriete numero a chacune des mini rubriques lors de leur creation. 
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Cliquersur le titre 

Lorsque l'utilisateur clique sur le titre du site alors que les mini rubriques sont affichees, 
celles-ci disparaissent pour laisser place au deplacement des rubriques jusqu'a leur position 
finale. 

Modifiez Taction cl icSurTitre( ) arm de rendre les mini rubriques invisibles. 
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L' etude des chapitres precedents montre qu'un script est constitute d' instructions elemen- 
taires (affectation, comparaison ou encore repetition) et de sous-programmes (calcul 
d'arrondis, affichage de donnees, gestionnaire d'evenement), appeles « fonctions » ou 
encore « methodes ». 

Ces instructions sont de nature suffisamment generale pour s' adapter a n'importe quel 
probleme. En les utilisant a bon escient, il est possible d'ecrire des applications simples 
mais d'une grande utilite. 

Dans le cadre du developpement de logiciels de grande envergure, les programmeurs 
souhaitent aussi definir leurs propres instructions adaptees au probleme qu'ils traitent. 
Pour cela, les langages de programmation offrent la possibilite de creer des fonctions 
specifiques, differentes des fonctions natives du langage. 

Pour comprendre l'interet des fonctions, nous analyserons d'abord le concept d'algo- 
rithme parametre a partir d'un exemple image (voir la section « Algorithme parametre »). 

Nous etudierons ensuite quelques fonctions natives du langage (section « Utilisation des 
fonctions natives ») afin d'en extraire les principes de fonctionnement. Puis, nous expli- 
querons comment elaborer et definir vos propres fonctions (section « Construire ses 
propres fonctions »). 

La mise en place de fonctions au sein d'un script modifie sa structure. Nous examinerons 
au cours de la section « Influence de la structure d'un script sur son comportement », les 
notions de visibilite ou portee des variables, de variables locales et de variables globales 
a partir d'exemples simples. Pour chacune de ces notions, nous observerons leur reper- 
cussion sur le resultat des differents programmes donnes en exemple. 

Nous analyserons ensuite (section « Les fonctions communiquent ») comment les fonctions 
echangent des donnees par 1' intermediate des parametres et du retour de resultat. 

Pour finir, nous examinerons comment mettre en oeuvre toutes les notions acquises au 
cours de ce chapitre, en ecrivant une application creant une palette de couleur interactive. 
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Algorithme parametre 

Certains algorithmes peuvent etre appliques a des problemes voisins en modifiant 
simplement les donnees pour lesquelles ils ont ete construits. En faisant varier certaines 
valeurs, le programme fournit un resultat different du precedent. Ces valeurs, caracte- 
ristiques du probleme a traiter, sont appelees « parametres » du programme. 

Pour comprendre concretement ce concept, nous allons reprendre 1' algorithme de l'ceuf 
poche pour le transformer en un algorithme qui nous permettra de realiser un plat de 
pates. 

Cuire des pates ou comment remplacer l'ceuf par des pates 

Pocher un ceuf ou faire cuire des pates sont des recettes qui utilisent des precedes a peu 
pres semblables. En reprenant la liste de toutes les operations necessaires a la realisation 
de l'oeuf poche, nous constatons qu'en remplacant simplement le mot « oeuf » par 
« pates » et le mot « vinaigre » par « huile d'olive », nous obtenons un plat de pates. 
Remarquons egalement que le temps de cuisson differe d'une recette a l'autre. 



1. 


Prendre une casserole. 


2. 


Verser l'eau du robinet dans la casserole. 


3. 


Poser la casserole sur la plaque electrique. 


4. 


Prendre le sel et le verser dans l'eau. 


5. 


Prendre 1 'huile d'olive et la verser dans l'eau. 


6. 


Allumer la plaque electrique. 


7. 


Fai re boui 1 1 i r 1 'eau. 


8. 


Prendre les pates et les placer dans la casserole. 


9. 


Prendre le minuteur. 


10. 


Mettre le minuteur sur 8 minutes. 


11. 


Prendre une assiette et la poser sur la table. 


12. 


Attendre que le minuteur sonne. 


13. 


Eteindre la plaque electrique. 


14. 


Prendre une cuillere. 


15. 


Retirer les pates de la casserole a 1'aide de la cuillere 


16. 


Poser les pates dans 1 'assiette. 



Pour faire un oeuf poche ou des pates, il suffit d'employer la meme recette, ou methode, 
en prenant comme ingredient un ceuf et du vinaigre ou des pates et de l'huile d'olive, et 
de modifier le temps de cuisson, selon notre choix. 



Remarque 

Nous avons supprime I'operation « Casser l'ceuf », parce qu'il n'estpas possible de « Casserdes pates ». 
Nous supposons pour simplifier le probleme que l'ceuf est deja casse. 



Dans la realite, le fait de remplacer un ingredient par un autre ne pose pas de difficultes 
particulieres. Dans le monde informatique, c'est plus complexe. En effet, l'ordinateur ne 
fait qu'executer la marche a suivre fournie par le programmeur. Dans notre cas, pour 
avoir un ceuf poche ou des pates, le programmeur doit ecrire la marche a suivre pour 
chacune des recettes. La tache est fastidieuse, puisque chacun des programmes se 
ressemble, tout en etant different sur deux points (les ingredients, le temps de cuisson). 
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Definir les parametres 

Pour eviter d' avoir a recopier a chaque fois des marches a suivre qui ne different que sur 
quelques details, l'idee est de construire un algorithme general. Cet algorithme ne varie 
qu'en fonction d'ingredients determines qui font que le programme donne un resultat 
different. 

En generalisant l'algoritlime de l'oeuf poche ou des pates, on exprime une marche a 
suivre permettant de realiser des preparations cuites a l'eau. Pour obtenir un resultat 
different (oeuf ou pates), il suffit de definir comme parametre de 1'algorithme, l'ingredient a 
choisir. 

La marche a suivre s'ecrit en remplacant les mots « oeuf » ou « pates »par premier Ingredient, 
« vinaigre » ou « huile d'olive » par secondlngredient, et « 3 » ou « 8 » par tempsCui sson. 



Tableau 7-1 Algorithme de cuisson de preparations a l'eau 



Instructions 


Nom du bloc d'instructions 


1. 


Prendre une casserole. 


cui re( 


2. 


Verser l'eau du robinet dans la casserole. 


premierlngredient, 


3. 


Poser la casserole sur la plaque electrique. 


secondlngredient, 


4. 


Prendre le sel et le verser dans l'eau. 


tempsCuisson) 






5. 


Prendre secondlngredient et le verser dans l'eau. 


6. 


Allumer la plaque electrique. 




7. 

8. 


Fa ire bouillir 1 'eau. 

Prendre premierlngredient et le placer dans la casserole. 




9. 


Prendre le minuteur. 




10. 


Mettre le minuteur sur tempsCuisson minutes. 




11. 


Prendre une assiette et la poser sur la table. 




12. 


Attendre que le minuteur sonne. 




13. 


Eteindre la plaque electrique. 




14. 


Prendre une cuillere. 




15. 


Retirer premierlngredient de la casserole a 1'aide de 
^»la cuillere. 




16. 


Poser premierlngredient dans 1 'assiette. 










Faire un ceuf poche equivaut done a executer le bloc d'instructions cuire(premierlngredient, 
secondlngredient, tempsCuisson) en utilisant comme ingredients un ceuf casse, du vinaigre 
et 3 minutes de temps de cuisson. L' execution du bloc cuired 'suf casse, le vinaigre, 3) 
a pour consequence de realiser les instructions 5, 8, 10, 15 et 16 du bloc d'instructions avec 
les ingredients concernes. L'instruction 5, par exemple, s'execute en remplacant le terme 
secondlngredient par le vinaigre. Au lieu de lire prendre secondlngredient, il faut lire 
prendre le vinaigre. 

De la meme facon, faire des pates revient a executer le bloc d'instructions cui redes 
pates, 1 'huile d'olive, 8). Le parametre premierlngredient correspond ici aux pates, 
secondlngredient a l'huile d'olive et tempsCuisson a 8 minutes. Les instructions 5, 8, 10, 15 
et 16 sont executees en consequence. 

Suivant la valeur prise par les differents parametres, 1' execution de cet algorithme fournit 
un resultat different. Cela peut etre un oeuf poche ou des pates. 
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Donner un nom au bloc d'instructions 

Nous constatons qu'en parametrant un algorithme, nous n'avons plus besoin de recopier 
plusieurs fois les instructions qui le composent pour obtenir un resultat different. 

En donnant un nom au bloc d'instructions correspondant a 1'algorithme general 
Preparer ( ), nous definissons un sous-programme capable d'etre execute autant de fois 
que necessaire. II suffit pour cela d'appeler le sous-programme par son nom. 

De plus, grace au parametre place entre les parentheses qui suivent le nom du sous- 
programme, la fonction s'execute avec des valeurs differentes, modifiant de ce fait le 
resultat. 



Remarque 

Un algorithme parametre est defini par : 

• un nom ; 

• un ou plusieurs parametres. 
En fin d'execution, il fournit : 

• un resultat qui differe suivantla valeurdu ou des parametres. 



En ActionScript, les algorithmes parametres s'appellent des « fonctions » ou encore 
« methodes ». Celles-ci permettent de traduire un algorithme parametre en programme 
informatique. Avant d' examiner quelle syntaxe utiliser pour les decrire, nous allons tout 
d'abord etudier quelques fonctions natives du langage, de facon a mieux comprendre 
comment elles s'utilisent. 

Utilisation des fonctions natives 

Comme nous avons pu le constater au cours des chapitres precedents, ActionScript 
propose un ensemble de fonctions predefinies tres utiles. Notre objectif n'est pas de 
decrire l'integralite des fonctions proposees par le langage, car ce seul manuel n'y suffirait 
pas. 

Principes de fonctionnement 

Nous souhaitons, a la lumiere d'exemples utilisant des fonctions predefinies du langage 
ActionScript, faire comprendre les principes generaux de fonctionnement et de mani- 
pulation des fonctions. 

Le nom des fonctions 

Au cours des chapitres precedents, nous avons utilise un certain nombre de fonctions 
parmi lesquelles Math.random( ), Math . round( ), addChi 1 d ( ) ou encore removeChi 1 d( ). 

Chacune de ces fonctions realise un calcul, une action specifique. Avec la fonction 
Math.randomO, nous obtenons une valeur calculee au hasard. La fonction mathematique 
etant deja programmed, il n'est pas necessaire d'ecrire nous-memes la marche a suivre 
pour obtenir une valeur au hasard. La fonction Math, round (), quant a elle, permet d'arrondir 
une valeur a Tender superieur ou inferieur. 

L' element permettant de distinguer chacune de ces deux fonctions est leur nom. 
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En effet, toute fonction native porte un nom particulier choisi par les concepteurs du 
langage ActionScript, parce qu'il a un sens. Le nom d'une fonction decrit une action 
precise. 



Remarque 

L'execution d'une fonction native passe par I'ecriture, dans une instruction, du nom de la fonction choisie, 
suivi de parametres eventuels places entre parentheses. 



Pour connaitre le nom des differentes fonctions proposees par le langage, la methode la 
plus simple consiste a consulter l'aide proposee par l'environnement Flash. Vous pouvez 
egalement consulter certains sites specialises sur ce langage ou encore lire des livres 
plus specifiques relatifs au traitement des donnees ou de la video sous ActionScript, 
par exemple. 

Memoriser le resultat d'une fonction 

Toute fonction fournit un resultat : 

• un nombre tire au hasard ; 

• un clip place sur la scene ; 

• un message affiche dans la fenetre de sortie. 

Le resultat d'une fonction peut done etre soit une action visible a l'ecran, soit une valeur 
que Ton stocke le plus souvent dans une variable afin d'eviter de la perdre et pour l'utiliser 
dans la suite du programme. 

Ainsi, par exemple, l'instruction : 

var auHasard:Number = Math . random( ) * 100; 

a pour resultat de calculer une valeur au hasard comprise entre 0 et 100 et de l'enregistrer 
grace au signe d'affectation = dans la variable auHasard. 

ds= Pour en savoir plus 

Pour plus d'informations sur le signe =, voir le chapitre 1, « Traiter les donnees », section « Les meca- 
nismes de I'affectation ». 

Pour memoriser le resultat d'un calcul, la fonction est placee dans une instruction 
d'affectation. La fonction situee a droite du signe = est executee en premier. Apres quoi, 
la variable situee a gauche du signe = recupere la valeur calculee lors de l'execution de la 
fonction. 

Les parametres d'une fonction 

Observons les instructions suivantes : 

var auHasard:Number = Math.random()*100; 
var resultat:uint = Math.round(auHasard) ; 
setChildIndex(unObjet, indice) 

Chacune de ces instructions est un appel a une methode particuliere. La premiere fonc- 
tion ne possede aucune valeur placee entre les parentheses, alors que les deux suivantes 
en ont une ou deux. Ces valeurs sont appelees les « parametres » ou encore les « arguments » 
d'une fonction. 
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Les fonctions peuvent pos seder de 0 a n parametres. 

• La fonction Math.random( ) ne possede pas de parametre. Cette fonction donne en 
resultat une valeur au hasard comprise entre 0.0 et 1.0, independamment de toute 
condition. Aucun parametre n'est done necessaire a son bon fonctionnement. 



Remarque 

Signalons que meme si la fonction n'a pas de parametre, il reste necessaire de placer des parentheses, 
ouvrante puis fermante, derriere le nom d'appel de la fonction. Toute fonction possede dans son nom 
d'appel des parentheses. 



• La fonction Math . round( ) ne comporte qu'un seul parametre. II s'agit de la valeur dont 
on souhaite extraire l'arrondi. La fonction ne sait executer ce calcul que pour une seule 
valeur a la fois. 

II est egalement possible de placer entre les parentheses une expression mathematique ou 
une autre fonction, plutot qu'une simple valeur. Ainsi, l'expression Math . round(Math . random( ) 
*10) arrondit a la valeur inferieure ou superieure une valeur tiree au hasard, sans que 
celle-ci n'ait ete stockee au prealable. 

Observons que le parametre place entre parentheses dans la fonction Math . round ( ) ne peut 
etre que de type Number. 

ds= Pour en savoir plus 

Pour plus d'informations, voir chapitre 1, « Traiter les donnees », section « La notion de type ». 

En effet, il n'est pas permis de placer en parametre de la fonction Math.round( ) un 
caractere, une suite de caracteres ou un booleen. Par exemple, le fait d'ecrire 
Math, round ("Qua t re. cinq") entraine une erreur en cours de lecture, l'ordinateur ne sachant 
pas transformer le terme « Quatre.cinq » en la valeur numerique 4.5 (message d'erreur : 
Contrainte implicite d'une valeur du type String vers un type sans rapport Number.). 



Remarque 

Dans I'appel de la fonction, le type des parametres doit etre respecte selon le modele decrit par Action- 
Script, sous peine d'obtenir une erreur lors de I'execution. 



• La fonction setChildIndex(nomDel_'objet, niveau) possede deux parametres. Ces para- 
metres sont separes par une virgule. Le premier indique le nom de l'objet dont on 
souhaite modifier le niveau d'affichage, le second fournit la nouvelle position de 
l'objet dans la liste d'affichage. 

Si les valeurs passees aux parametres nomDeL'objet et niveau sont inversees dans I'appel 
de la fonction (setChildlndextniveau, nomDeL'objet)), le lecteur Flash ne peut modifier 
le niveau d' affichage. Une erreur de type : Echec de la contrainte de type : conversion de 
niveau apparait. Le programme ne peut etre execute. 



Remarque 

Dans I'appel de la fonction, I'ordre des parametres doit etre respecte, sous peine d'obtenir un resultat 
different de celui attendu. 
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Les fonctions etudiees dans cette section sont celles predefinies par ActionScript. 
Le programmeur les utilise en connaissant le resultat qu'il souhaite obtenir. 

ActionScript offre aussi au programmeur la possibility d'ecrire ses propres fonctions de 
facon a obtenir differents programmes adaptes au probleme qu'il doit resoudre. Nous 
etudions cette technique ci-apres. 

Construire ses propres fonctions 

Une fonction developpee par un programmeur s'utilise de la meme facon qu'une fonc- 
tion predefinie. Elle s'execute en placant l'instruction d'appel a la fonction dans le 
programme. 

Mais, pour que l'ordinateur puisse lire et executer les instructions composant la fonction, 
il convient de la definir, c'est-a-dire d'etablir la liste des instructions qui vont lui permettre 
de realiser le comportement attendu. 

Definir une fonction 

La definition d'une fonction s'effectue au travers d'une syntaxe bien precise qui permet 
de specifier le nom d'appel de la fonction ainsi que les instructions qui la composent. 

Syntaxe 

Pour definir une fonction, il convient d'utiliser la syntaxe suivante : 
//© En-tete de la fonction 

function nomDeLaFonction(parametrel:type, parametre2:type, ...):type 
{ 

//@ Definition du corps de la fonction 

} 

O Le nom d'une fonction est defini grace a un en-tete de fonction qui est compose : 

• Du mot-cle function qui debute l'en-tete afin de preciser au lecteur Flash que les 
instructions suivantes concernent la definition d'une nouvelle fonction. 

• Du nom de la fonction, choisi par le developpeur afin d' identifier cette fonction. 
Ce nom est ensuite utilise pour appeler cette meme fonction. 



Remarque 

Le nom d'une fonction est choisi de fagon a representor etresumer tout ce qui est rea lise parson interme- 
diate. Bien evidemment, il est fortement deconseille de choisir un nom identique a celui d'une fonction 
definie par le langage. 



• De parentheses ouvrante et fermante encadrant une suite de parametres separes par des 
virgules. Le type de chacun des parametres doit etre specifie, comme pour une decla- 
ration de variables. Lutilisation des parametres est decrite plus bas, a la section « Les 
parametres d'une fonction » de ce chapitre. 

• D'un type precede de « : » afin de preciser le type de la valeur retournee par la fonc- 
tion. La notion de resultat de fonction est etudiee plus loin, a la section « Le resultat 
d'une fonction » de ce chapitre. 
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© Une fois le nom de la fonction defini, il est necessaire de l'associer aux instruc- 
tions decrivant le comportement de la fonction. Pour cela, l'en-tete de la fonction est 
place au-dessus du corps de la fonction, determine par les accolades ouvrante et 
fermante ({ et }). Le corps d'une fonction est essentiellement compose de declarations 
de variables et d' instructions d' affectation, de tests, de repetitions, d'appels a des fonctions, 
etc. 

Exemple 

Pour ce premier exemple, nous choisissons de vous presenter une fonction tres simple : 

function disBonjourt ) :void{ 
trace( "Bonjour a tous ! "); 

I > 

Cette fonction est composee d'une seule instruction affichant le texte « Bonjour a 
tous ! » a l'aide de la commande traceO. Elle a pour nom disBonjourt ), elle ne possede 
aucun parametre entre ses parentheses et ne fournit pas de resultat, de valeur a memori- 
ser, comme peut en fournir, par exemple, la fonction Math . random( ). C'est pourquoi nous 
avons place le terme : void juste apres la parenthese fermante. 



Extension web 

Vous pourrez tester cet exemple en executant le fichier PremiereFonction.fi a, sous le repertoire 
Exemples/chapitre7. 



Executer une fonction 

Si vous executez le programme tel quel, c'est-a-dire sans autre instruction que celle defi- 
nissant la fonction, vous ne verrez rien apparaitre a l'ecran, outre le panneau de fond 
habituel. La fenetre de sortie n'apparait pas, ni le message « Bonjour a tous ! ». 

Pourquoi ? 

La fonction disBonjourO est correctement definie mais elle n'est pas appelee. Pour ce 
faire, nous devons placer dans le script une instruction qui indique que nous souhaitons 
executer les instructions placees a l'interieur de la fonction. II s'agit de l'instruction 
d'appel d'une fonction. 

Syntaxe 

L'instruction d'appel d'une fonction construite par vos propres soins s'effectue comme 
suit : 

nomDeLaFoncti'on(parametrel, parametre2, ...); 

La fonction est appelee par son nom suivi de parentheses ouvrante et fermante. Ces 
parentheses peuvent contenir des valeurs separees par des virgules selon la definition de 
la fonction. Le type des valeurs doit correspondre a celui des parametres declares lors 
de la definition de la fonction. 



Si la fonction est definie sans parametre, l'appel a la fonction s'effectue en placant les 
parentheses vides derriere le nom de la fonction. 
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Exemple 

L'appel a la fonction di sBonjour( ) est realise par l'instruction suivante : 
disBonjourt ) ; 

Pour cet exemple, l'instruction d'appel est placee a la suite de la definition de la fonction. 
Elle aurait pu etre placee avant, sans que cela change quoi que ce soit au resultat de 
l'execution. Le programme affiche dans la fenetre de sortie le message « Bonjour a 
tous ! ». 



Question 

Que se passe-t-il si Ton appelle la fonction disBonjour( ) en oubliant de la definir? 
Reponse 

L'appel a une fonction non definie ne provoque pas d'erreur. L'instruction dlsBonjourO estexecutee et 
elle echoue en silence. Dans d'autres langages tels que le C ou Java, le fait d'utiliser une fonction 
inconnue (non definie) provoque une erreurde compilation. Le programme ne peutetre execute. Flash est 
beaucoup plus permissif en executant les instructions qu'il connait, tout en laissantde cote celles qu'il ne 
comprend pas. Mais cela ne veutpas dire pour autantque le script realise ce que Ton souhaite faire. 

Comment placer les fonctions dans un script 

Avec les fonctions, nous voyons apparaitre la notion de fonctions appelees et de 
programmes appelant des fonctions. 

Dans notre exemple, la fonction disBonjour( ) est appelee par le script courant. Pour des 
raisons pedagogiques, nous avons choisi d'ecrire toutes les instructions seulement sur le 
caique script de la premiere image du scenario principal. Nous appelons ce script le 
« script courant » ou encore le « script principal ». 



Remarque 

II est possible d'ecrire des scripts sur d'autres images-cles du scenario principal ou encore sur des occur- 
rences de symbole ou de bouton. Dans ce cas, les variables declarees a I'interieur de ces scripts ne sont 
connues que d'eux-memes. II existe toutefois des mecanismes permettant d'acceder a ces variables. 



Toute fonction peut appeler ou etre appelee par une autre fonction. Ainsi, rien n'interdit 
que la fonction disBonjour( ) soit appelee par une autre fonction definie ailleurs dans le 
script. 

Les fonctions sont des programmes distincts les uns des autres. Elles sont definies sepa- 
rement et placees avant ou apres le script courant. L'ordre d' apparition des fonctions 
dans le script principal importe peu et est laisse au choix du programmeur. 

Pour des raisons de clarte, nous choisissons dans cet ouvrage de definir les fonctions 
avant le script principal. Ainsi, l'exemple precedent s'ecrit de la facon suivante : 

//Definition de fonction 
function di sBonjourt ) : void{ 
trace( "Bonjour a tous !"); 

} 



//Script courant 
disBonjourt ) ; 
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En examinant la structure generate de ce programme, nous observons qu'il existe deux 
blocs d' instructions, l'un etant imbrique dans l'autre, comme illustre a la figure 7-1. 



Figure 7-1 

La fonction disBonjourf ) 
est imbriquee dans le 
script principal. 



0 Script principal 




function disBonjour():void 
{ 

trace("Bonjour a tous !"): 

} 










disBonjour(); 



Influence de la structure d'un script sur son comportement 

Un script est done constitue d'un script principal et d'un ensemble de fonctions definissant 
chacune un bloc d' instructions independant. 

En realite, il existe trois principes fondamentaux qui regissent la structure d'un 
programme ecrit en ActionScript. Ces principes sont detailles ci-dessous. 

1 . Un programme contient : 

- un ensemble de fonctions definies par le programmeur ; 

- des instructions de declaration de variables ; 

- des instructions elementaires (affectation, test, repetition...) ; 

- des appels a des fonctions, predefinies ou non. 

2. Les fonctions contiennent : 

- des instructions de declaration de variables ; 

- des instructions elementaires (affectation, test, repetition...) ; 

- des appels a des fonctions, predefinies ou non. 

3. Chaque fonction est comparable a une boite noire dont le contenu n'est pas visible en 
dehors de la fonction. 

De ces trois proprietes decoulent les notions de visibilite des variables, de variables locales 
et de variables globales. Concretement, ces trois notions sont attachees au lieu de decla- 
ration des variables, comme 1' illustre la figure 7-2. 

Pour mieux comprendre ces differents concepts, nous allons observer un programme 
compose d'un script principal, de deux fonctions, initialiser.) et doublet), ainsi que 
d'une variable nominee valeur. La fonction initialiser.) a pour objectif d'initialiser la 
variable valeur, tandis que la fonction double ( ) multiplie par 2 le contenu de la variable 
val eur. 

Pour chaque exemple, la variable val eur est declaree en un lieu different du programme. 
A partir de ces variations, le programme fournit un resultat different que nous analysons. 
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Figure 7-2 

Les variables peuvent etre 
declarees a I'interieur ou 
a I'exterieur des fonc- 
tions, avant ou apres elles. 



II Script principal 

// Declaration des variables 

// Instructions elementaires (if, for, ...) 

// Appel a des fonctions predefines ou non 



function premiereFct(psramefre):fype { 
// Declaration des variables 

// Instructions elementaires (if, for, ...) 

// Appel a des fonctions predefinies ou non 

} 



function secondeFct(parame(re):fype { 
// Declaration des variables 

// Instructions elementaires (if, for, ...) 

// Appel & des fonctions predefinies ou non 

} 



// Script principal (suite ...) 

// Declaration des variables 

// Instructions elementaires (if, for, . ..) 

// Appel a des fonctions predefinies ou non 



La visibility des variables 

Apres etude des trois proprietes enoncees ci-dessus, nous observons qu'un script est 
constitue d'instructions, dont des instructions de declaration de variables et de fonctions. 
II existe, de fait, une notion d'exterieur et d'interieur aux fonctions. 

De plus, la troisieme propriete exposee ci-dessus exprime le fait qu'une fonction ne peut 
pas utiliser, dans ses instructions, une variable declaree dans une autre fonction. Pour 
mieux visualiser cette propriete, examinons le programme ci-dessous. 

Exemple : Visibilite.fla 

function ini ti al ise( ) : void( 
var valeunuint = 2; 

traceCValeur = " + valeur + " dans initialiseO "); 

} 

function doublet ) :void{ 
valeur = valeur * 2; 

traceCValeur = " + valeur + " dans doublet) "); 

} 

//Script principal 
ini tial ise( ) ; 
doubl e( ) ; 

Dans ce programme, la fonction doublet) cherche a modifier le contenu de la variable 
valeur, alors que celle-ci est declaree et initialisee a 2 dans la fonction initial i set ). 
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Figure 7-3 

Une variable declaree 
dans unefonction ne peut 
etre utilisee par une autre 
fonction. 



II Script principal 


function initialise():void { 

// Declaration des variables 
var valeur:uint = 2; 




valeur 







function double():void { 
valeur = valeur * 2; 



initialiseO 
doublet) ; 



Cette modification n'est pas realisable, car la variable val eur n'est definie qu'a l'interieur 
de la fonction initial ise(). Elle est done invisible depuis la fonction doublet ). Les fonc- 
tions sont, par definition, des blocs distincts. La fonction doublet) ne peut agir sur la 
variable valeur qui n'est visible qu'a l'interieur de la fonction initial 1se(). 

C'est pourquoi le fait d'ecrire l'instruction valeur = valeur * 2; dans la fonction 
doublet ) a pour resultat d'afficher le message d'erreur La variable valeur n'est pas 
definie dans la fenetre de sortie. La variable valeur n'est pas definie dans la fonction 
doublet ) . Le lecteur Flash ne peut multiplier une variable non declaree par une valeur 
numerique. 

Variable locale a une fonction 

La deuxieme propriete enoncee precedemment etablit qu'une fonction est formee 
d' instructions elementaires, et notamment d' instructions de declaration de variables. 

Par definition, une variable declaree a l'interieur d'une fonction est dite « variable locale a la 
fonction ». Dans l'exemple precedent, la variable valeur est locale a la fonction initialiseO. 

Les variables locales n'existent que pendant le temps de l'execution de la fonction. Elles 
ne sont visibles ni depuis une autre fonction, ni depuis le script principal. 

Cependant, le programmeur debutant qui souhaite modifier a tout prix la variable val eur 
va chercher a contourner, dans un premier temps, le probleme precedent en declarant une 
seconde variable valeur dans la fonction doublet ). De cette facon, la variable valeur est 
definie et connue des deux fonctions. Examinons plus precisement ce que realise un tel 
programme. 

Exemple : VariableLocale.fla 

function initial i set ) :void{ 
var val eur: Number = 2; 

tracet "Valeur = " + valeur + " dans initialiseO "); 

} 
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function doublet ) :void{ 
var valeunNumber; 
valeur = valeur * 2; 

trace( "Val eur = " + valeur + " dans doublet) "); 



//Script principal 
initial ise( ) ; 
doubl e( ) ; 

Pour bien comprendre ce qu'effectue ce programme, construisons le tableau d' evolution 
de chaque variable declaree dans le programme Vari abl eLocal e . f 1 a. 

i Pour en savoir plus 

Voir chapitre 1, « Traiter les donnees », section « Les rn.ecanism.es de I'affectation ». 

Puisque les fonctions initialiseO et doubl e() sont des blocs d' instructions separes, le 
lecteur Flash cree un emplacement memoire pour chaque declaration de la variable 
valeur. II existe deux cases memoire valeur distinctes portant le meme nom. Elles sont 
distinctes parce qu' elles ne sont pas declarees aux meme endroits. Le tableau des variables 
declarees pour chaque bloc est le suivant : 

Variable locale a initialiseO valeur Variable locale a doublet ) valeur 

var val eur: Number = 2; 2 var valeur:Number; NaN 



La variable locale a la fonction doubl e() est declaree mais non initialisee, elle est done 
consideree comme NaN par le lecteur Flash, e'est-a-dire de type Not a Number. Meme si 
elle porte le meme nom que la variable declaree dans la fonction initialiseO, elle ne 
contient pas la meme valeur. 

Ainsi, le programme realise les actions suivantes : 

• Appeler la fonction Initial 1 se( ) qui affiche le contenu de la variable val eur definie a 
l'interieur de cette fonction, soit 2. 

• Sortir de la fonction initial i se( ) et detruire la variable val eur locale a cette fonction. 

• Retourner au script principal et appeler la fonction doubl e( ) qui affiche le contenu de 
la variable valeur definie a l'interieur de cette fonction, soit NaN « Valeur = NaN dans 
doubl e( ) » dans la fenetre de sortie. Multiplier une variable NaN par une valeur nume- 
rique a pour resultat de rendre la variable NaN . 

La variable valeur est declaree deux fois dans chacun des deux blocs d' instructions et 
nous constatons que la fonction doubl e() ne change pas le contenu de la variable valeur 
declaree dans la fonction initialiseO. En realite , meme sices deux variables portent le 
meme nom, elles sont totalement differentes et leur valeur est stockee dans deux cases 
memoire distinctes. 

En cherchant a resoudre une erreur de visibilite des variables, nous n'avons pas ecrit la 
fonction qui modifie la valeur d'une variable definie en dehors d'elle-meme. Cette modi- 
fication est impossible dans la mesure ou la variable val eur n'est connue que de la fonction 
dans laquelle elle est declaree, et d'aucune autre. 
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Figure 7-4 

Toute variable declaree a 
Vinterieur d'une fonction 
est une variable locale 
propre a cette fonction. 



II Script principal 



function initialise():void { 

// Declaration des variables 
i var valeur:Number = 2; 



valeur 



function double():void { 
var valeur:Number ; 
^valeur = valeur * 2; 



valeur 
NaN 



initialised I 
double() ; 



Remarque 

En declarant la variable valeur avec le type uint, le lecteur Flash initialise la variable valeur a 0 
dans la fonction doublet). L'execution du programme a pour resultat d'afficher « Valeur = 0 dans 
doubl e( ) » dans la fenetre de sortie. 



Variable globale au script principal 

En examinant plus attentivement la premiere propriete definie au tout debut de cette 
section, nous constatons que le script courant contient egalement des instructions de 
declaration, en dehors de toute fonction. Les variables ainsi declarees sont appelees 
variables « globales ». Elles sont definies pour 1' ensemble du script et sont visibles 
depuis toutes les fonctions. 

Exemple : VariableGlobale.f la 

function initial i se( ) :void{ 
valeur = 2 

trace( "Valeur = " + valeur + " dans initialiser.) "); 

} 

function doubl e( ) :void{ 
valeur = valeur * 2; 

traceCValeur = " + valeur + " dans doublet) "); 

} 

//Script principal 
var valeur:uint; 
initial ise( ) ; 
doublet ) ; 

traceCValeur = " + valeur + " dans le script courant "); 

La representation par blocs du programme (voir figure 7-5) montre que la variable val eur 
est visible tout au long du programme. 
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Figure 7-5 

Une variable declaree en 
dehors de toute fonction 
est appelee variable 
globule. 



II Script principal 



function initialised: void { 
y ^aleur = 2 



function double():void 
valeur ■ valeur * 2 

} " 




// Declaration des variables 
var valeunuint ; 

initialise) ) ; 
doubled I 



Remarque 

La variable valeur n'est plus declaree a I'interieur des deux fonctions, mais dans le script principa 
La declaration des variables globales peuts'effectueravantou apres la definition des fonctions. 



Puisque la variable valeur est declaree a l'exterieur des fonctions initialiseO et 
doubl e( ), elle est definie comme etant une variable globale au script courant. La variable 
valeur existe tout le temps de 1' execution du script et les fonctions definies en son sein 
peuvent l'utiliser et modifier son contenu. 

L' execution du programme a pour resultat : 

valeur = 2 dans initialiseO 

valeur = 4 dans doubleO 

valeur = 4 dans le script courant 



La variable valeur etant une variable globale, l'ordinateur ne cree qu'un seul emplacement 
memoire. Le tableau devolution de la variable est le suivant : 



Variable globale 


valeur 


valeur = 2 //dans la fonction initialiser. 


2 


valeur = 4 //dans la fonction doubleO 


4 



valeur = 4 //dans le script courant 4 



Puisqu'il n'existe qu'une seule case memoire nominee valeur, celle-ci est commune a 
toutes les fonctions du programme, qui peuvent y deposer une valeur. Lorsque la fonc- 
tion doubleO place 4 dans la case memoire valeur, elle ecrase la valeur 2 que la fonction 
initialiseO avait precedemment placee. 

En utilisant le concept de variable globale, nous pouvons ecrire une fonction qui modifie 
le contenu d'une variable definie en dehors de la fonction. 
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Quelques precisions sur les variables globales 

Puisque les variables locales ne sont pas modifiables depuis d'autres fonctions et que, a 
l'inverse, les variables globales sont vues depuis toutes les fonctions du programme, le 
programmeur debutant aura tendance, pour se simplifier la vie, a n'utiliser que des variables 
globales. 

Or, 1' utilisation abusive de ce type de variables comporte plusieurs inconvenients que 
nous detaillons ci-dessous. 

Declarer plusieurs variables portant le meme nom 

L'emploi systematique des variables globales peut etre source d'erreurs, surtout lorsqu'on 
prend l'habitude de declarer des variables portant le meme nom. Observons le programme 
suivant : 

function initial i set ) :void{ 
var valeur:uint = 2 

traceCValeur = " + valeur + " dans initialiseO "); 

} 

//Script principal 
var valeur:uint = 0; 

trace( "Val eur = " + valeur + " avant initialiseO "); 
initial ise( ) ; 

traceCValeur = " + valeur + " apres initialiseO "); 

Dans ce programme, la variable valeur est declaree deux fois, une fois comme variable 
globale et une autre fois comme variable locale a la fonction initialiseO. 



Remarque 

Rien n'interdit de declarer plusieurs fois une variable portant le meme nom dans des blocs d'instructions 
differents. Toutes les instructions definies a I'interieur d'un couple d'accolades { et } constituent un bloc 
d'instructions. 



Le fait de declarer deux fois la meme variable n'est cependant pas sans consequence sur 
le resultat du programme. 

Dans la fonction initialiseO, les deux variables valeur coexistent et representent deux 
cases memoire distinctes. Lorsque l'instruction valeur = 2 est executee, le lecteur Flash 
ne peut placer la valeur numerique 2 dans les deux cases memoire a la fois. II est oblige 
de choisir. Dans un tel cas, la regie veut que ce soit la variable locale qui soit prise en 
compte et non la variable globale. 

Le resultat final du programme est le suivant : 



va 


eur 


= 0 


avant initialiseO 




va 


eur 


= 2 


dans initialiseO 




va 


eur 


= 0 


apres initialiseO 
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La modification n'est valable que localement. Lorsque le programme retourne au script 
principal, la variable locale n'existe plus. Le programme affiche le contenu de la variable 
globale, soit 0. 

De I'independance des fonctions 

Comme nous l'avons deja observe (voir la section « Algorithme parametre »), une fonc- 
tion est avant tout un sous-programme independant, capable d'etre execute autant de fois 
que necessaire et traitant des donnees differentes. 

En construisant des fonctions qui utilisent des variables globales, nous creons des fonc- 
tions qui ne sont plus des modules de programmes independants, mais des extraits de 
programmes travaillant tous sur le meme jeu de variables. 

Cette dependance aux variables globales nuit au programme, car il est necessaire, pour 
reutiliser de telles fonctions, de modifier tous les noms des variables globales de facon a 
les rendre compatibles avec les nouveaux programmes. 

Par exemple, la fonction doublet ) ne double que le contenu de la variable valeur et 
d'aucune autre. Pour doubler le contenu d'une variable portant un autre nom, nous 
devons soit ecrire une autre fonction utilisant ce nouveau nom de variable, soit affecter la 
valeur de la nouvelle variable a val eur. 

En cas de developpement de logiciels importants, comportant des centaines de milliers 
d'instructions, la transformation et l'amelioration des fonctionnalites du programme se 
trouvent fortement compromises. L' ensemble du code doit etre examine precisement 
afin de determiner oil se trouve la variable globales concernee par la transformation 
envisagee. 

Dans ce cadre, il convient de prendre en compte les regies suivantes : 

• Utiliser les variables globales en nombre limite, le choix de ce type de variable s'effec- 
tuant en fonction de l'importance de la variable dans le programme. Une variable est 
consideree comme globale lorsqu'elle est commune a un grand nombre de fonctions. 

• Ecrire un programme de facon modulaire, chaque fonction travaillant de facon inde- 
pendante, a partir de valeurs transmises a l'aide des techniques etudiees a la section 
suivante. 



Les fonctions communiquent 

Lemploi systematique des variables globales peut etre, comme nous venons de le voir, 
source d'erreurs. Pour limiter leur utilisation, il existe des techniques simples, qui font 
que deux fonctions communiquent le contenu d'une case memoire locale de l'une des 
fonctions a une case memoire locale de 1' autre. 

Ces techniques sont basees sur le parametrage des fonctions et sur le retour de resultat. 

Pour mieux cerner le fonctionnement de chacune de ces techniques, reprenons les deux 
fonctions initialiseO et doublet ) et examinons comment doubler le contenu de la 
variable valeur sans utiliser de variables globales. Pour simplifier et etre plus concis dans 
nos explications, nous supposons que la fonction doublet) est appelee par la fonction 
initi al i set ). 
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Le passage de parametres par valeur 

Notre contrainte est cette fois de n'utiliser que des variables locales. Ainsi, la variable 
valeur est locale a la fonction initialiseO et, pour multiplier par deux cette valeur, la 
fonction doubl e( ) doit effectivement connaitre le contenu de la variable val eur. 

La fonction initialiseO doit communiquer le contenu de la variable val eur a la fonction 
doublet ). Cette communication est realisee en passant le contenu de la variable au para- 
metre de la fonction doublet ). Examinons le programme ci-apres. 

Exemple : ParValeur.fla 

function initial i se( ) :void{ 
var valeur:uint = 2; 

traceCvaleur = " + valeur + " avant doublet) "); 
double(valeur) ; 

traceCvaleur = " + valeur + " apres doublet) "); 

1 

function doubl et val eur :uint) :void{ 

traceCvaleur = " + valeur + " dans doublet) "); 
valeur = valeur * 2; 

traceCvaleur = " + valeur + " dans doublet) "); 

1 

//Script principal 
initial iset ) ; 

Dans ce programme, deux variables valeurs sont declarees. La premiere est locale a la 
fonction initial iset ), tandis que la seconde est locale a la fonction doublet ). Cependant, 
comme la seconde est declaree dans l'en-tete de la fonction, elle est consideree non 
seulement comme variable locale a la fonction, mais surtout comme parametre formel de 
la fonction doublet ). 



Remarque 

• Le parametre formel defin it la forme de la variable que Ton doit passer en parametre. Pour bien 
comprendre cela, rappelons-nous de I'algorithme de I'ceuf poche ou des pates, dans lequel nous avons 
utilise une variable premierlngredient prenant la forme de I'ceuf ou des pates suivantce que I'on 
souhaitaitobtenir. 

• Le parametre reel ou encore parametre effectif correspond a la valeur fournie lors de I'appel de la 
fonction doublet). C'est la valeur de ce parametre qui est transmise au parametre formel lors de 
I'appel de la fonction. 



De cette facon, lorsque la fonction doublet) est appelee depuis la fonction initialiseO 
avec comme valeur de parametre le contenu de val eur (soit 2), la variable valeur locale de 
doubl et ) prend la valeur 2 (voir figure 7-6). 
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Figure 7-6 

Grace au parametre, 
le contenu d'une variable 
locale a lafonction 
appelante (initialise()) 
est transmis a lafonction 
appelee (double()). 



II Script principal 



function initialise():void { 
var valeuruint = 2; 
*vdouble (valeur); 



7^ 

double (valeur 



function double( valeur:uint ):void { 
i valeur = valeur * 2; 



initialise)) ; 



valeur 
2 



valeur 



-P- 4 



Ensuite, la variable valeur locale a la fonction doublet ) est multipliee par deux grace a 
1' instruction valeur = 2 * val eur;. La variable val eur vaut done 4 dans la fonction doublet ). 
Lorsque le programme sort de la fonction doublet ) et retourne a la fonction initial i set ), 
il detruit la variable locale de la fonction doublet) et affiche le contenu de la variable 
valeur locale a la fonction initial 1 se(), soit encore 2. 

Resultat de I'execution 



va 


eur 


= 2 


avant doubl et ) 


va 


eur 


= 2 


dans doublet) 


va 


eur 


= 4 


dans doublet) 


va 


eur 


= 2 


apres doublet) 



Grace au parametre de la fonction doublet ), le contenu de la variable valeur locale a la 
fonction initial iset ) est transmis a la fonction doublet ). Une fois la fonction executee, 
nous constatons que la variable valeur de la fonction initial iset) n'est pas modifiee 
pour autant. 



Remarque 

Lorsqu'une fonction communique le contenu d'une variable a une autre fonction par Pintermediaire d'un 
parametre, on dit que le parametre est « passe par valeur ». Ce type de transmission de donnees ne 
permetpas de modifier, dans la fonction appelante, le contenu de la variable passee en parametre. 



En effet, la valeur passee en parametre est copiee dans la case memoire associee au para- 
metre. Meme si celui-ci porte le meme nom que la variable, il s'agit de deux cases 
memoire distinctes. La modification reste done locale a la fonction. Pour que la modifi- 
cation soit prise en compte, il existe deux techniques : 

• le retour de resultat (voir la section « Le resultat d'une fonction » ci-apres) ; 

• le passage de parametres par reference (voir la section « Le passage de parametres par 
reference » ci-apres). 
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Syntaxe liee aux parametres 

Les parametres d'une fonction sont definis dans l'en-tete de la fonction. Leur nombre est 
variable et depend des besoins propres a la tache realisee par la fonction. 

La syntaxe d'ecriture de l'en-tete d'une fonction varie selon qu'elle possede ou non des 
parametres. 

Fonction avec plusieurs parametres 

Ainsi, lorsqu'une fonction possede plusieurs parametres, ceux-ci sont separes par une 
virgule lors de leur declaration. L'en-tete d'une fonction prend alors la forme suivante : 

function quelconque(a:uint, c:String, t:Boolean) :void; 



Remarque 

Derriere chaque para metre est place son type, meme si deux parametres consecutifs sontde type identique. 



Lors de l'appel a une fonction possedant plusieurs parametres, les valeurs sont transmi- 
ses aux parametres dans l'ordre d' apparition dans la liste. La premiere valeur fournie lors 
de l'appel est passee au premier parametre defini dans l'en-tete, la seconde valeur est 
passee au second parametre. . . 

Ainsi, l'instruction d'appel a la fonction quel conque( ) : 
| quelconquedO, "fraises", true):void 

a pour resultat de placer la valeur 10 dans la variable a, la chaine de caracteres "fraises" 
dans la variable c et la valeur true dans la variable t. 



Question 

Que se passe-t-il si l'en-tete d'une fonction nommee max( ) est ecrit de la fagon suivante : 
function max(a, b:uint) 

Reponse 

Le lecteur Flash ne detecte pas d'erreur alors qu'aucun type n'est precise pour le parametre a. De ce fait, 
il est possible d'appeler la fonction comme suit : 

max( "un" ,2) ; 

Ce qui a priori n'a pas de sens ; la fonction max( ) recherche la plus grande des deux valeurs passees en 
parametres. La comparaison de deux valeurs n'est valide que si elle s'effectue sur des variables de meme 
type. Pour etre certain que les valeurs passees en parametres correspondent aux parametres formels, vous 
devez definir le type de tous les parametres. L'en-tete de la fonction max( ) doit etre defini comme suit : 

function max(a:uint, b:uint) 

Dans ce cas, l'appel de la fonction avec "un" en premier parametre entratne une erreurde type « Incom- 
patibility de types ». 

Fonction sans parametre 

Une fonction peut ne pas avoir de parametre. Son en-tete ne possede alors aucun para- 
metre entre parentheses comme la fonction disBonjour( ) presentee en premier exemple 
de la section Definir une fonction. 
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Le resultat d'une fonction 

Pour garder le resultat de la modification du contenu d'une variable en sortie de fonction, 
une technique consiste a retourner la valeur calculee par 1' intermediate de l'instruction 
return. 

Examinons le programme ci-dessous qui utilise cette technique. 
Exemple : ResultatFonction.fla 

function ini ti al ise( ) : void{ 
var valeunuint = 2; 

trace( "val eur = " + valeur + " avant doublet) "); 
valeur = double(valeur); 

trace( "val eur = " + valeur + " apres doubleO "); 

} 

function double(v:uint) :uint{ 
var resultat:uint; 

trace("v = " + v + " dans doubleO "); 
resultat = v * 2; 

traceCresultat = " + resultat + " dans doubleO "); 
return resultat; 

} 

//Script principal 
initial i set ) ; 

Ici, le contenu de la variable val eur est passe au parametre v de la fonction doubl e( ). Puis- 
que le parametre formel (v) correspond a une case memoire distincte de la variable effec- 
tivement passee (valeur), il est plus judicieux de le declarer sous un autre nom d'appel 
que celui de la variable, de facon a ne pas les confondre. 



Remarque 

En general, ettantque cela reste possible, nous avons pour convention de donnercomme nom d'appel du 
parametre formel la premiere lettre du parametre reel. Pournotre exemple, valeur estle parametre reel. 
Le parametre formel s'appelle done v. 



Une fois le calcul realise a l'interieur de la fonction doubl e( ), la valeur resultante placee 
dans la variable resultat est transmise a la fonction initial ise( ) qui a appele la fonction 
doubleO. Cette transmission est realisee grace a l'instruction return resultat. Le contenu 
du resultat est alors place dans la variable valeur grace au signe d'affectation =, comme 
l'illustre la figure 7-7. 
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Figure 7-7 

Grace au retourde resultat, 
le contenu d'une variable 
locale a la fonction appe- 
lee doublef ) est transmis 
a la fonction appelante 
initialise(). 



II Script principal 



function initialise)): void { 
var valeur:uint = 2; 
valeur = jjouble (valeur); 



valeur 



return resultat; 



function doublet. v:uint ):uint { 



(varresultat:uint = valeur * 2; 
return resultat; 




initialise!) ; 



Resultat de I'execution 



valeur = 2 avant doublet) 

v = 2 dans doubl e( ) 

resultat = 4 dans doublet) 

valeur = 4 apres doublet) 

Grace a la technique du retour de resultat et du passage de parametre par valeur, les fonc- 
tions peuvent echanger les contenus de variables. Les variables locales sont done exploi- 
tables aussi facilement que les variables globales, tout en evitant les inconvenients lies a 
ces dernieres. 



Syntaxe liee au retour de resultat 

L'instruction return est utilisee pour terminer une fonction. Lorsque le lecteur Flash 
rencontre l'instruction return, il sort de la fonction en ignorant les eventuelles instruc- 
tions restantes. II retourne a la fonction ou au script qui a appele la fonction en gardant en 
memoire la valeur a retourner. 

L'instruction return permet done la transmission d'une valeur d'une fonction a une autre 
fonction. 

Fonction avec resultat 

Comme nous l'avons observe lors de la definition de la fonction doubl e( ), toute fonction 
fournissant un resultat contient un return place dans le corps de la fonction. De plus, 
l'en-tete de la fonction possede obligatoirement un type qui correspond a celui du resultat 
retourne. 

Si une fonction retourne en resultat une variable de type uint, son en-tete s'ecrit : 



function nomdel afonction( ) : uint 
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Remarque 

Une fonction ne retourne qu'une et une seule valeur. L'instruction return a, b; ne provoque pas 
d'erreur, mais elle echoue en silence et aucune valeur n'esttransmise au programme appelant. 



Lorsqu'une fonction fournit plusieurs resulfats, la transmission des valeurs ne peut se reali- 
ser par 1' intermediate de l'instruction return. II est necessaire dans ce cas d'employer la 
technique du passage de parametres par reference decrite en section suivante. 



Question 

Que se passe-t-il si Ton ecrit I'en-tete de la fonction doublet. ) de la facon suivante : 

function double (valeur:uint):Boolean { 

//Des instructions 
return valeur; 

} 

Reponse 

Le lecteur Flash affiche le message d'attention (Warning) suivant : 

Warning: void utilisee alors qu'une valeur booleenne est attendue. L'expression va 
etre transtypee comme booleenne. 

Ce message ne constitue pas une erreur de syntaxe pour le lecteur Flash. L'animation estexecutee. Le 
lecteur Flash signale cependantque la variable valeur est transformed automatiquement en booleen, 
soit 1 si valeur estnon nulle au momentdu return. 



Fonction sans resultat 

Une fonction peut ne pas fournir de resultat. Tel est, en general, le cas des fonctions utili- 
sees pour l'affichage de messages. Par exemple, la fonction disBonjour( ) ne fournit pas 
de resultat. 

Dans ce cas, l'en-tete function disBonjourt ) :void mentionne que la fonction disBonjour( ) 
ne retourne pas de resultat grace au mot-cle voi d place derriere les parentheses de la fonc- 
tion. 

Si une fonction ne retourne pas de resultat, son en-tete est de type void, et l'instruction 
return ne figure pas dans le corps de la fonction. 



Question 

Que se passe-t-il si Ton insere l'instruction suivante a la fin de la fonction initial ise( ) ? 

function initialise():void { 

//Des instructions 
return valeur; 

} 

Reponse 

Le lecteur F lash affiche le message d'erreur suivant : 

La valeur renvoyee doit etre de type undefined. 

II faut entendre par la que l'instruction return ne peut retourner de valeur, I'en-tete de la fonction 
initial ise() precisant qu'elle ne retourne pas de resultat (void). Dans ce cas, l'instruction return ne 
peut pas figurer dans le corps de la fonction. 
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Le passage de parametres par reference 

Avec la technique du passage de parametres par reference, les valeurs transmises en para- 
metres et modifiees par la fonction le sont egalement pour le script principal. II est ainsi 
possible de changer plusieurs valeurs au sein d'une fonction et de transmettre ces trans- 
formations a la « variable » passee en parametre. 

La grande difference entre le passage de parametres par valeur et celui par reference se 
situe dans le fait que Ton passe, en parametre d'une fonction, non plus une simple varia- 
ble (de type uint, ou Bool ean), mais l'adresse d'une case memoire. Grace a cela, les modi- 
fications apportees sur l'objet passe en parametre et realisees a l'interieur de la methode 
sont visibles en dehors me me de la methode. 

Doubler les valeurs d'un tableau 

Pour comprendre en pratique le mecanisme du passage de parametres par reference, 
examinons plus attentivement le programme suivant : 

//© Definition de la fonction doublet) 
function doubl e(tmp:Arr«y ) :void{ 
for (var iiuint = 0 ; i < tmp. length ; i++) 
tmp[i] = 2 * tmp[i]; 

} 

//© Declaration du tableau unTableau 

var unTableau:Array = new ArraydOO, 200, 300, 400); 

var i :uint; 

//Affichage du contenu du tableau unTableau 
trace ("Avant l'appel de la fonction doubleO"); 
for (i = 0 ; i < unTableau. length ; i++) 

trace( "unTabl eau[ " + i + " ] = " + unTabl eau[i ] ) ; 

//© Appel de la fonction doublet ) 
double(unTablesu) ; 

//Affichage du contenu du tableau unTableau 
trace ("Apres l'appel de la fonction doublet )"); 
for (i = 0 ; i < unTableau. length ; i++) 

trace( "unTabl eau[ " + i + " ] = " + unTabl eau[i ]) ; 

© Le parametre tmp de la nouvelle fonction doublet ) est de type Array. II s'agit d'un para- 
metre formel representant un tableau quelconque. Loperateur new n'est pas applique a 
ce tableau, aucun espace memoire supplemental n'est done alloue. La valeur reellement 
passee en parametre est l'adresse du tableau (pour notre exemple, unTabl eau) fournie 
lors de l'appel de la fonction, et non toutes les valeurs contenues dans le tableau 
(voir figure 7-8). 

© Loperateur new reserve 4 espaces memoire et determine l'adresse memoire du tableau 
unTabl eau. Ce dernier est initialise aux valeurs 100, 200, 300 et 400. La premiere boucle 
affiche alors les valeurs : 

Avant l'appel de la fonction doubleO 

unTableau[ 0 ] = 100 

unTableau[ 1 ] = 200 

unTableau[ 2 ] = 300 

unTabl eau[ 3 ] = 400 
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ds= Pour en savoir plus 

L'operateur new et la notion d'adresse memoire sonttraites au chapitre 8, « Les classes et les objets ». 

© Lors de l'appel de la fonction doublet ) depuis le script principal, le parametre tmp 
prend pour valeur l'adresse du tableau unTabl eau (voir figure 7-8). 



Figure 7-8 

La valeur passee 
en parametre de la fonc- 
tion doublef ) correspond 
a I 'adresse du tableau 
unTableau. 



II Script principal 
nTat nu 



@ 
> > 




100 


200 


300 


400 


^ 1 



double! unTableau) 



function double( tmp:Array ):void \ 

for (var i:uint =0;... ) 
tmp[i] = 2 • tmp[i]; 



tmp 



Le tableau tmp contient uniquement l'adresse du tableau unTableau. Ainsi, acceder a la 
case tmp[i] revient a acceder, par l'intermediaire de son adresse, a la case unTabl eau[i] 
(voir figure 7-9). L'instruction : 

tmp[i] = 2 * tmp[i] ; 

a done pour effet de doubler les valeurs du tableau se situant a l'adresse @, e'est-a-dire les 
valeurs du tableau unTableau. 



Figure 7-9 

Le tableau tmp utilise la 
meme reference que le 
tableau unTableau. 



II Script principal 
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double) unTableau) 



function doublet tmp:Array ):void { 

for (var i:uint =0;... ) 
<tmp[i] = 2 • tmp[i]; 
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Apres execution de la fonction doubl e( ), la seconde boucle for du script principal affiche : 



Apres 1 'appel de 


la fonction doublet ) 


unTableau[ 0 ] = 


200 


unTableau[ 1 ] = 


400 


unTableau[ 2 ] = 


600 


unTableau[ 3 ] = 


800 



Le tableau unTabl eau a ete modifie par 1' intermediate du tableau tmp. 

Au final, nous constatons que la modification du tableau tmp, declare comme parametre 
de la fonction doublet), entraine la modification du tableau unTabl eau alors qu'aucune 
instruction n'a reellement porte sur ce dernier. 

Ainsi, grace a la technique du passage de parametres par reference, tout objet passe en 
parametre d'une fonction voit, en sortie de la fonction, ses donnees transformees par 
cette derniere. 



L'objectif de cet exemple est de creer un outil permettant d'afficher une couleur et son 
code hexadecimal. L' application presente une zone centrale qui affiche un carre de 
couleur tandis que six boutons (2 rouges, 2 verts et 2 bleus) offrent la possibility d'ajouter 
ou de retirer de la couleur rouge, verte et bleue respectivement (voir figure 7-10) au carre. 
Sous la zone centrale est affiche le code couleur de cette derniere. 



Pour realiser cette application, nous etudierons, en plus des notions associees aux 
couleurs : 

• les notions de variables locales et globales ; 

• la mise en place de fonctions avec parametre et/ou sans resultat. 



Une palette de couleurs 



Figure 7-10 




Les boutons sont uti- 
lises pour ajouter ou 
retirer de la couleur. 
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Rechercher les actions repetitives 

La meilleure facon de detecter les instructions susceptibles d'etre placees a l'interieur 
d'une fonction est de rechercher, dans la structure de 1' application, les actions repetitives 
ainsi que les differents objets qui peuvent etre crees et utilises de facon similaire. 

Pour notre application, observons que : 

• Les six boutons ainsi que la zone de couleur centrale sont similaires. Meme si tous ces 
objets ne sont pas de meme taille, chacun affiche une forme carree, coloriee de facon 
specifique et presentant une zone de texte dans sa partie inferieure. La creation d'une 
telle forme peut done etre realisee par 1' intermediate d'une fonction (voir la section 
« La fonction creerUneForme() »). 

• Les objets presents sur la scene sont tous de couleurs differentes. De plus, la couleur 
varie dans la zone centrale, lorsque l'utilisateur clique sur un des boutons. Pour modi- 
fier la couleur des objets, il est necessaire de calculer le code hexadecimal de la 
couleur souhaitee. Ce calcul est realise a l'aide de la fonction creerUneCouleur( ) 
presentee ci-apres. 

• Cliquer sur un des boutons a pour effet d'augmenter ou de diminuer la quantite de 
rouge, de vert ou de bleu dans la zone centrale. Ces actions sont realisees a l'aide des 
fonctions plusDeCouleurO et moinsDeCouleurO decrites plus bas dans ce cette section. 



La fonction creerUneCouleurQ 

La fonction creerUneCouleurQ est utilisee pour calculer le code hexadecimal d'une 
couleur a partir de la quantite de rouge, de vert et de bleu avec laquelle on souhaite peindre. 

Creer la fonction 

Le calcul d'une couleur s'effectue a l'aide de trois valeurs de type uint representant la 
quantite de rouge, de vert et de bleu que Ton souhaite utiliser. Ces quantites varient entre 
0 et 255. II convient done de definir trois parametres pour la fonction creerUneCoul eur( ), 
representant les quantites de rouge, de vert et de bleu. 

Une fois le code couleur cree, celui-ci doit etre transmis au script principal arm qu'il 
puisse connaitre la couleur de la zone a modifier. La fonction creerUneCoul eur( ) doit done 
retourner en resultat une valeur qui correspond au code hexadecimal de la couleur 
recherchee. Cette valeur est de type String. 

Pour toutes ces raisons, l'en-tete de la fonction a pour forme : 

function creerUneCouleur(rouge:uint, vert:uint, bleu:uint) iString 

Ensuite, le corps de la fonction regroupe 1' ensemble des instructions permettant le calcul 
du code hexadecimal de la couleur decrite par les valeurs passees en parametres. La fonction 
creerUneCoul eur( ) est definie ci-dessous. 

Code source de la fonction creerUneCouleurQ 

function creerUneCouleur(rouge:int, vertiint, bleu:int):String { 
//© Declaration et initialisation de tmp 
var tmp:String = "Ox"; 
//© Test de la quantite de rouge 
if (rouge < 16) { 
tmp = tmp+"0"; 
} 
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//© Calcul en base 16 

tmp = tmp + rouge. toString(16) .toUpperCaset ) ; 
//© Test de la quantite de vert 
if (vert < 16) { 
tmp = tmp+"0" ; 

} 

tmp = tmp+vert.toString(16) .toUpperCase( ) ; 
//© Test de la quantite de bleu 
if (bleu < 16) { 
tmp = tmp+"0" ; 

} 

tmp = tmp+bl eu.toString(16) . toUpperCase( ) ; 
//© 

return tmp; 

} 

Le code d'une couleur est une valeur hexadecimale composee de 6 lettres (RRVVBB) precedee 
des caracteres Ox afin de preciser qu'il s'agit bien d'une valeur hexadecimale. 

Les deux premieres valeurs (RR) definissent la quantite de rouge, les secondes (VV) la 
quantite de vert et les troisiemes (BB) la quantite de bleu. Les quantites de couleur sont 
calculees non pas en base 10, mais en base 16 pour obtenir un code hexadecimal. Les 
valeurs varient done de 00 (pas de couleur) a FF (au maximum de couleur). 

A partir des valeurs rouge, vert et bleu passees en parametres, valeurs codees en base 10, 
la fonction calcule un code obtenu par juxtaposition des termes Ox suivi de la valeur de 
rouge puis de la valeur de vert et, pour finir de la valeur de bleu. Chacune de ces valeurs 
est calculee en base 16. Pour obtenir ce code, la technique utilise la demarche suivante : 

© Le code hexadecimal commence toujours par le terme "Ox", e'est pourquoi nous ini- 
tialisons la variable tmp a "Ox". Par la suite, tmp est utilisee pour stockee la suite des 
valeurs hexadecimales du rouge, du vert et du bleu. 

Les valeurs sont placees dans tmp, les unes a la suite des autres grace a la technique 
d' accumulation. En ecrivant : 

tmp = tmp + "0" ; 

ou encore 

tmp = tmp + rouge. toString(16) .toUpperCase( ) ; 

La valeur precedemment stockee est conservee et la nouvelle valeur est accolee a la 
suite, puisqu'il s'agit de chaine de caracteres. 

ks= Pour en savoir plus 

L'addition de mots, appelee « concatenation », estetudiee au chapitre 1, « Traiter les donnees », section 
« Addition de mots » etau chapitre 3, « Communiquerou interagir », section « Une calculatrice pourfaire 
des additions ». La technique de I'accumulation est decrite au chapitre 4, « Faire des choix », section 
« Les techniques de programmation incontournables ». 

© La premiere valeur a coder en hexadecimal est le rouge. Le calcul d'une valeur deci- 
male en base 16 est realise par la methode toString( ), en placant la valeur 16 en para- 
metre de la methode. Le parametre indique au compilateur que la transformation de 
valeur rouge en chaine de caracteres s'effectue en utilisant la base 16. 



La valeur obtenue est ensuite transformee en majuscule grace a la methode toUpperCaset ). 
La valeur hexadecimale fournie par la methode toStringt ) est une chaine de caracteres. 
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II est done possible de transformer les caracteres en majuscule en utilisant la methode 
native toUpperCase( ) de la classe String. 

© Un traitement particulier est realise pour les valeurs de couleur inferieures a 16. En 
effet, le code hexadecimal d'une valeur comprise entre 0 et 15 varie de 0 a F, mais le 
code d'une couleur compris entre 0 et 16 varie de 00 a OF. Un 0 est place avant la 
valeur hexadecimale. Le test ( i f valeur < 16) tmp = tmp + "0" a pour resultat de placer 
un 0 a la suite des valeurs contenues dans tmp. Ainsi, si rouge vaut par exemple 12, il 
sera place dans tmp, Ox dans un premier temps, grace a 1' initialisation (O) puis, 0 puis- 
que rouge est inferieur a 16 (©) et enfin C qui est la valeur hexadecimale de 12 (©). 

Les valeurs de vert et de bleu sont ensuite ajoutees a la variable tmp en utilisant un trai- 
tement similaire a celui du rouge. Pour finir, lorsque le code est entierement 
calcule, la fonction transmet au programme appelant la valeur enregistree tmp a l'aide 
de l'instruction return (©). 

Appeler la fonction 

Le calcul d'un code couleur s'effectue a differents moments de 1' application. 

Tout d'abord, pour calculer la couleur initiale de la zone centrale et celle des six boutons. 
Ensuite, a chaque fois que Ton clique sur un des boutons pour ajouter ou retirer de la 
couleur et modifier ainsi la zone centrale. 

L'instruction creerUneCouleurO se situe done a plusieurs endroits dans le programme : 

• A la creation de la zone de couleur centrale dont la couleur est initialement mauve 
fonce. Les parametres de la fonction creerUneCoul eur( ) ont pour valeurs 125, 100 et 125 
pour le rouge, le vert et le bleu respectivement. Ces valeurs definissent les quantites de 
rouge, vert et bleu initiales. Elles seront amenees a etre modifiees a chaque fois que 
l'utilisateur clique sur l'un des six boutons. Pour faire en sorte que les quantites de 
couleur soient accessibles a chaque clic sur l'un des boutons, les valeurs 125, 100 et 125 
sont enregistrees dans des variables globales nominees respectivement valeurDeRouge, 
valeurDeVert et val eurDeBl eu. Ainsi, a chaque fois qu'une quantite de couleur sera 
modifiee, nous modifierons l'une de ces trois variables. 

• A la creation des six boutons. Chaque bouton est de couleur constante pour chacune 
des categories ajout ou suppression de couleur. Les trois couleurs sont creees avec une 
valeur maximale dans sa tonalite, soit 255. Ainsi, par exemple, la couleur du bouton 
rouge est creee grace a l'instruction : 

var rougeBtnrString =creerUneCouleur(255, 0, 0); 

• A l'interieur des gestionnaires d'evenements MouseEvent .MOUSEJP, pour augmenter ou 
diminuer la quantite de couleur de rouge, de vert ou de bleu a chaque fois que l'utili- 
sateur clique sur l'un des boutons de l'interface. La fonction creerUneCouleurO est 
appelee afin de calculer le code couleur associe au clic. La fonction utilise alors en 
parametres, les variables globales valeurDeRouge, valeurDeVert et val eurDeBl eu de facon 
a conserver les bonnes quantites de couleur entre chaque clic, quelque soit la couleur 
modifiee. 



Extension web 

Vous trouverez le code source de cet exemple dans le fichier CodeCouleur.fi a, sous le repertoire 
Exemples/chapitre7. 
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La fonction creerUneFormeQ 

La fonction creerUneForme( ) est utilisee pour creer un carre de couleur et de taille variable. 
Le carre s'affiche n'importe oil sur la scene. Un texte s'affiche en dessous du carre. 

Creer la fonction 

Nous devons parameter la fonction creerUneForme( ) de facon a lui permettre de creer des 
carres avec une zone de texte variable. La forme creee peut etre placee n'importe oil sur 
la scene. Les parametres de la fonction sont done la position en x et y du coin superieur 
droit du carre, la longueur du cote, la couleur ainsi que le texte a afficher. 

Une fois creee, chaque zone doit etre manipulable par le script principal. La fonction doit 
retourner en resultat l'objet cree. 

Pour cela, l'en-tete de la fonction definit six parametres comme suit : 

function creerUneForme(nx:uint, ny:uint, c:int, 

teinte:String, label :String) :MovieClip 

Les trois premiers parametres (nx, ny et c) sont de type uint, ils correspondent respective- 
ment aux positions horizontale et verticale du bord superieur gauche du carre et a la 
longueur du cote. Les deux derniers parametres, teinte et label, sont de type String. Ils 
sont utilises pour modifier la couleur du carre et decrire le texte a afficher sous le carre. 

Ensuite, le corps de la fonction regroupe 1' ensemble des instructions permettant la crea- 
tion, le positionnement et le coloriage du carre (O), l'affichage du texte (©). La forme 
ainsi creee est transmise au programme appelant par 1' intermediate de 1' instruction 
return (©). 

Pour en savoir plus 

L'affichage d'une forme carree avec ombre ainsi que celui d'une zone de texte est decrite au chapitre 2, « Les 
symboles », section « Gestion de la liste d'affichage». 

Code source de la fonction creerUneFormeO 

function creerllneForme(nx:uint, ny:uint, c:int, teinte:String, 
label :String):MovieClip { 

//Creer un conteneur pour le carre et le texte 
var boite:MovieCl ip = new MovieClipO; 

//© Creer un carre en nx. ny de cote c et de couleur teinte 
var carre:Sprite = new SpriteO; 

//© Colorier le carre avec la couleur passee en parametre 
ca r re. graphics .begin Fil 1 (parselnt(teinte) ) ; 
carre. graphics. drawRecttnx, ny, c, c); 
carre. graphics .endFi IK); 

//Le carre est ombre 

carre. filters = [new DropShadowFilter(2)]; 

//Afficher le carre dans la boite 

boite.addChild(carre) ; 

//© Creer une zone de texte 

var leTexte:TextField = new TextFieldO; 

//Modifier le format de texte par defaut 

leTexte.defaultTextFormat = format; 

//Positionner le champ de texte en bas a gauche 

1 eTexte.x=nx; 

leTexte.y=ny+c; 
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Ills, hauteur du texte est de 24 pixels 
leTexte. height = 24; 

//Placer le texte passe en parametre dans la zone de texte 

leTexte. text = label ; 

//Afficher la zone de texte dans la boite 

boi te . addChi 1 d ( leTexte); 

//© La boite obtenue est retournee an programme appelant 
return boite; 



Remarque 

La couleur passee en parametre est de type String, alors que la methode begin Fill ( ) n'accepte en 
parametres que des valeurs numeriques positives. C'est pourquoi, la chaine de caracteres teinte (O) 
est transformed en valeur numerique par I'intermediaire de la methode parselnt( ). 



Appeler la fonction 

La fonction creerUneForme( ) est appelee plusieurs fois dans l'application : 

1. Pour creer la zone de couleur centrale. L'appel a la fonction s'effectue de la facon 
suivante : 

var valeurDeRouge:int = 125; 
var valeurDeVert:int = 100; 
var valeurDeBleu:int = 125; 

var couleur:String = creerUneCouleur(valeurDeRouge, valeurDeVert, valeurDeBleu) ; 
var carreCentre:MovieCl ip; 

carreCentre = creerUneForme (largeur/2-taille*4, hauteur/2-taille*5, taille*10, 



addChild(carreCentre) ; 

L'objet carreCentre represente la zone centrale qui est un carre de cote egal a 
100 pixels. La couleur d'affichage du carre est calculee a partir d'une quantite de 
rouge egale a 125, de vert egale a 100 et de bleu egale a 125. Le texte affiche sous la 
zone coloriee correspond au code hexadecimal de la couleur d'affichage du carre. 

2. A l'interieur d'une boucle for pour creer de facon automatique les six boutons + et - 
pour chacune des couleurs rouge, verte et bleue. 

var rougeBtn:String =creerUneCouleur(255, 0,0); 

var vertBtn:String =creerllneCouleur(0,255, 0); 

var bleuBtn:String =creerllneCouleur(0, 0,255) ; 

I/O listeBtn stocke la liste des boutons une fois ceux-ci crees 

var listeBtn:Array = new ArrayO; 

//© listeCouleur stocke la liste des couleurs 

// des boutons dans leur ordre de creation 

var listeCouleur:Array = [ rougeBtn, rougeBtn, vertBtn, vertBtn, bleuBtn, bleuBtn]; 
for (var i:uint= 0; i < listeCouleur. length; i ++) { 

I/O Verifie le numero du bouton dans la liste 

if (i%2 == 0) { 
//© Creation des boutons + 

1 isteBtn[i ]=creerUneForme( (tai 1 le+ecart)*i+largeur/2-6*tail 1 e/2. 



couleur, couleur); 




"+"); 



1 isteBtn[i ]=creerUneForme( (tai 1 le+ecart)*i+l argeur/2-6*tail 1 e/2. 

hauteur/2+150, taille, listeCouleur[i] 



"-"); 
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} 

1 isteBtn[i] .buttonMode = true; 

//© On enregistre la couleur du bouton dans 

//une propriete nommee teinte 

listeBtn[i].teinte = listeCouleur[i]; 

addChild(listeBtn[i]) : 

} 

Chaque bouton cree a l'interieur de la boucle est enregistre dans un tableau nomme 
listeBtn (O et ©). Le tableau 1 i steCoul eur est cree et initialise pour automatiser la 
creation des boutons a l'interieur de la boucle for (© et ©). L'ordre des couleurs de 
bouton correspond a l'ordre d'affichage des boutons sur la scene. 

Grace au test if ( 1 %t == 0 ) (©), le texte situe en dessous du bouton devient le signe + 
ou -.En effet, les boutons d'indice 0, 2 et 4 dans le tableau 1 i steBtn correspondent au 
bouton d'ajout de couleur, alors que les boutons d'indice 1, 3 et 5 sont utilises pour 
diminuer la couleur correspondant au bouton de soustraction. 

Observez egalement, la facon dont les boutons sont positionnes sur l'axe des X. La 
variable taille correspond a la longueur du cote, ecart, au nombre de pixels entre 
chaque bouton. Ce calcul permet d'obtenir les 6 boutons centres en x sur la scene. 



Remarque 

La couleur specifique de chaque bouton est enregistree dans la propriete teinte (©) de chaque objet 
cree par la methode creerUneForme( ). Cette propriete estensuite utilisee au sein des methodes d'ajout 
ou de suppression de couleur, afin de savoir quelle teinte doit etre augmentee ou diminuee. 



ds= Pour en savoir plus 

La definition de propriete d'objet est etudiee plus precisementau chapitre 8, « Les classes etles objets », 
section « Construire et utiliser ses propres classes ». L'ajout d'une propriete est traite au chapitre 9, « Les 
principes du concept objet », section « Les classes dynamiques ». 

3. Pour finir, la methode creerUneForme( ) est appelee a chaque fois que la couleur de la 
zone centrale est modifiee par un clic sur l'un des 6 boutons de l'interface (©). Ces 
appels s'effectuent a l'interieur des gestionnaires d'evenements MouseEvent.MOUSEJP 
associes aux 6 boutons de 1' application. 

//© Si le carre central existe, on le supprime 
if (carreCentre != null) { 
removeChi ld(carreCentre) ; 

} 

//© Creer le carre avec une nouvelle couleur 

carreCentre = creerUneForme(largeur/2-taille*4, hauteur/2-taille*5, 

taille*10, couleur, couleur); 

addChild(carreCentre) ; 

A chaque appel de la methode creerUneForme( ), un objet de type MovieCl ip est cree en 
memoire. Pour chaque nouvelle couleur afhchee, un nouveau carre vient se superposer 
a l'ancien. Pour eviter de creer un trop grand nombre d'objets inutiles dans la liste 
d'affichage (les carres precedents sont caches par les suivants, done invisibles), nous 
devons supprimer le carre central, a chaque fois que l'utilisateur clique sur l'un des six 
boutons. Cette suppression (©) s'effectue a l'interieur du test if (carreCentre != null) 
afin d'etre sur de detruire un objet present en memoire. Une fois detruit, l'objet 
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carreCentre est cree avec une nouvelle couleur (©) en faisant appel a la methode 
creerUneForme( ). 

Ces instructions sont placees a l'interieur des methodes pi usDeCouleur( ) et 
moinsDeCoul eur( ) decrites ci-apres. 



Extension web 

Vous trouverez le code source de cet exemple dans le fichier CodeCouleurVl.fi a, sous le repertoire 
Exemples/chapitre7. 



Les fonctions plusDeCouleurQ et moinsDeCouleurQ 

A chaque clic sur l'un des boutons de l'application, la couleur du carre central est modifiee. 
Si l'utilisateur clique sur l'un des trois boutons +, la quantite de couleur correspondant au 
bouton augmente, s'il clique sur un des trois boutons -, la quantite de couleur diminue. 
Les fonctions plusDeCouleur( ) et moinsDeCouleur( ) realisent ces deux operations, augmen- 
tation ou diminution de quantite de couleur. 

Les deux fonctions utilisent le meme type d'algorithme. Lune incremente la dose de 
couleur, tandis que l'autre la decremente. C'est pourquoi nous n'examinerons ici que la 
fonction plusDeCouleurO. 

Creer la fonction 

La fonction plusDeCouleurO n'est executee que lorsque l'utilisateur clique sur l'un des 
boutons. Elle correspond a une action suite a un evenement de type MouseEvent.MOUSEJJP. 
La fonction prend done en parametre un objet de type Event, afin de recuperer les infor- 
mations relatives a l'evenement emis. La fonction plusDeCouleurO ne fournit pas de 
resultat. 

Pour toutes ces raisons, l'en-tete de la fonction s'ecrit : 

function pi usDeCoul eur(e: Event) :void 

Ensuite, le corps de la fonction regroupe 1' ensemble des instructions modifiant la couleur 
du carre central. 

La premiere instruction est utilisee pour savoir quel bouton vient d'etre clique. Elle 
permet d'obtenir une reference sur le bouton qui a recu l'evenement (O). Connaissant 
cette reference, la propriete ci bl e . ten nte contient alors le code couleur du bouton clique, 
soit "OxFFOOOO" pour le bouton rouge, "OxOOFFOO" pour le bouton vert et "OxOOOOFF" pour le 
bouton vert. 



Remarque 

La propriete teinte est initialised au moment de la creation des boutons. Elle memorise le code couleur 
du bouton en cours de creation. 



Suivant la teinte (©), la quantite de couleur concernee est incrementee de 5 (pas = 5), si 
la couleur est a son maximum (elle depasse 255), la couleur reste egale a 255 (©). 
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Remarque 

Pour la fonction moinsDeCouleur( ) le test ne s'effectue pas sur la maximum de couleur mais sur le 
minimum. Si la couleur devient plus petite que o, e Me reste egale a o. 



Une fois la quantite de couleur augmentee, le code de la nouvelle couleur est calcule (©) 
et un nouveau carre est affiche (©). 

Code source de la fonction plusDeCouleurQ 

function plusDeCouleur(e:Event):void ( 
//© Recuperer la reference du bouton qui a ete clique 
var cible:MovieClip = e.currentTarget as MovieClip; 

//Deplacer le bouton vers le bas 

//et vers la droite au moment du clic 

cible.x--; 

cible.y--; 

var pas:int=5; 

//© Suivant la teinte du bouton 
switch (cible. teinte) { 
//© Si le bouton est rouge 
case "OxFFOOOO" : 
//Si la quantite de rouge est plus petite que 255 
if (valeurDeRouge < 255) { 

//La quantite de rouge augmente de 5 
valeurDeRouge+= pas; 
} else ( 

//Si la quantite depasse 255, el 1 e reste egale a 255 
valeurDeRouge = 255; 

} 

break; 

//© Si le bouton est vert 
case "OxOOFFOO" ; 
//Si la quantite de vert est plus petite que 255 
if (valeurDeVert < 255) { 

//La quantite de vert augmente de 5 
valeurDeVert+= pas; 
} else ( 

//Si la quantite depasse 255, elle reste egale a 255 
valeurDeVert = 255; 

} 

break; 

case "OxOOOOFF" : 
//© Si la quantite de bleu est plus petite que 255 
if (valeurDeBleu < 255) { 

//La quantite de bleu augmente de 5 
valeurDeBleu+= pas; 
} else { 

//Si la quantite depasse 255, elle reste egale a 255 
valeurDeBleu = 255; 

} 

} 

//© Calculer la nouvelle couleur 

couleur = creerUneCouleur(valeurDeRouge, valeurDeVert, valeurDeBleu) ; 
//Si la carre central existe, le supprimer 
if (carreCentre != null) { 
removeChild(carreCentre) ; 
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} 

//© Creer un carre avec une nouvelle couleur 

carreCentre = creerUneForme (largeur/2-taille*4, hauteur/2-taille*5, 

taille*10, couleur, couleur); 

//Afficher le carre 
addChi Id (carreCentre ) ; 

} 



Extension web 

Vous trouverez le code source de cet exemple dans le fichier CodeCouleurVl.fi a, sous le repertoire 
Exemples/chapitre7. 



Appeler la fonction 

Les deux fonctions plusDeCouleur( ) et moinsDeCouleurO sont executees lorsque l'utilisa- 
teur clique sur l'un des six boutons de 1' application. Ces deux fonctions correspondent a 
des actions a realiser suite a un evenement de type « clic de souris ». Elles sont appelees 
par 1' intermediate des gestionnaires d'evenements MouseEvent.MOUSE_UP. 

Les deux fonctions sont done placees, pour chaque bouton cree, en parametres de la 
methode addEventl_istener( ), comme suit : 

for (var i:uint= 0; i < listeCouleur. length; i ++) { 
if (1*2 == 0) { 

//Si le bouton est un bouton + 

listeBtn[i] = creerUneForme( (tai 1 1 e+ecart)*i+l argeur/2 - 6*taille/2, 

hauteur/2+150, taille,listeCouleur[i] ,"+"); 
1 isteBtn[i ] .addEventl_istener(MouseEvent.MOUSE_UP, pi usDeCouleur) ; 
} else { 

//Si le bouton est un bouton - 

listeBtn[i] = creerUneForme((taille+ecart)*i +largeur/2 - 6*taille/2, 

hauteur/2+150, taille,listeCouleur[i] ,"-"); 
1 i steBtn[i ] .addEventListener(MouseEvent.MOUSE_UP, moinsDeCouleur) ; 

} 

listeBtn[i] .buttonMode = true; 
listeBtn[i].teinte = 1 i steCoul eur[i ] ; 
addChild(listeBtn[i] ); 

} 

Ainsi, suivant le bouton cree, bouton d'ajout de couleur ou de suppression, le gestion- 
naire d'evenement associe fait appel a la methode plusDeCouleurO ou moinsDeCouleurO, 
respectivement. 



Memento 



Dans le langage ActionScript, les algorithmes parametres s'appellent des « fonctions » 
ou encore des « methodes ». 

ActionScript propose un ensemble de fonctions predefinies parmi lesquelles se trouvent 
des fonctions telles que Math.roundO pour calculer l'arrondi du nombre place entre 
parentheses, ou encore setChi 1 dlndex( ) pour modifier le niveau d'affichage d'un objet. 
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L' etude des fonctions natives du langage montre que : 

• Pour executer une fonction, il est necessaire d'ecrire dans une instruction le nom de la 
fonction choisie, suivi des parametres eventuels, places entre parentheses. 

• Toute fonction possede, dans son nom d'appel, des parentheses ouvrante et fermante. 

• Le type et l'ordre des parametres dans l'appel de la fonction doivent etre respectes, 
sous peine d'obtenir une erreur de compilation ou d' execution. 

Le langage ActionScript offre en outre au programmeur la possibility d'ecrire ses propres 
fonctions. Pour cela, vous devez : 

• Preciser les instructions composant la fonction, en les placant dans le corps de la fonc- 
tion. Ce dernier est determine par des accolades { et }. 

• Associer le nom de la fonction aux instructions a l'aide d'un en-tete qui precise le nom 
de la fonction, le type des parametres (appeles « parametres formels ») et le type de 
resultat retourne. Cet en-tete se redige sous la forme suivante : 

function nomDeLaFonction(parametres) :type 

• Etablir les parametres utiles a 1' execution de la fonction en les declarant a l'interieur 
des parentheses placees juste apres le nom de la fonction. 

Lorsqu'une fonction possede plusieurs parametres, ceux-ci sont separes par une 
virgule. Devant chaque parametre est place son type, meme si deux parametres conse- 
cutifs sont de type identique. Par exemple : 

function intialise(couleur:String, x:uint, y:uint):void 

Lorsqu'une fonction n'a pas de parametre, son en-tete ne possede aucun parametre 
entre parentheses. 

• Preciser le type du resultat fourni par la fonction dans l'en-tete de la fonction, et placer 
l'instruction return des que le resultat doit etre transmis au programme appelant la 
fonction. 

Toute fonction fournissant un resultat possede une instruction return placee dans le 
corps de la fonction. Par exemple : 

function leTiers(valeur:int) :Number { 
return valeur/3; 

} 

L'en-tete de la fonction possede obligatoirement un type qui correspond au type de 
resultat retourne. Notons qu'une fonction ne retourne qu'une et une seule valeur. 

Si une fonction ne retourne pas de resultat, son en-tete est de type void et l'instruction 
return ne figure pas dans le corps de la fonction. 

Une fonction peut etre appelee (executee) depuis une autre fonction ou depuis le script 
principal. L'appel d'une fonction est realise en ecrivant une instruction composee du nom 
de la fonction suivi, entre parentheses, d'une liste de parametres. Par exemple : 

var resultat:Number = leTiers(12); 
intialise("0x30EAF3", 200, 250) 

Les valeurs passees en parametres lors de l'appel de la fonction sont appelees les « para- 
metres reels », ou encore les « parametres effectifs ». 
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Exercices 



L'objectif de cette serie d'exercices est de realiser une application qui se presente sous la 
forme suivante : 



Figure 7-11 

Lorsque I 'utilisateur 
clique sur le bouton 
Lancer, les bulles se 
deplacent et rebondissent 
sur les bords. 
Elles s 'arretent lorsque 
Von clique sur le bouton 
Stopper. 




Au lancement de l'application, 10 bulles sont affichees sur la scene, toutes de couleurs 
differentes. Un bouton Lancer permet de demarrer 1' animation. Les bulles se deplacent 
dans tous les sens avec leur propre vitesse. Elles rebondissent sur le bord de la scene. Le 
bouton Stopper arrete 1' animation. 

Les bulles, les boutons et le calcul de la couleur des bulles sont crees par 1' intermediate 
de fonctions. Le lancement et 1'arret de l'animation sont egalement realises par l'inter- 
mediaire de fonctions associees a des gestionnaires d'evenements. 

Vous pourrez realiser cette application etape par etape, en suivant la suite des exercices 
proposee ci-apres. 



Extension web 

Pour vous faciliter la tache, le fichier Exercice7.fla, a partirduquel nous allons travailler, se trouve dans 
le repertoire Exercices/SupportPourRealiserl_esExercices/Chapitre7. Dans ce meme reper- 
toire, vous pouvez acceder aux differentes applications telles que nous souhaitons les voir fonctionner 
(Exerci ce7_l . swf a Exercice7_6.swf) une fois realisees. 



Comprendre /'utilisation des fonctions 
Exercice 7.1 

A la lecture du programme suivant : 

function creerUneBul 1 e(nx : Number ,ny : Number, coul eur: uint) : Bui leCl p { 
var uneBulle = new BulleClpO; 
uneBulle.x = nx; 
uneBulle. y = ny; 

uneBulle. viteX = Math.random()*10+10; 
uneBulle. viteY = Math.random()*10+10; 
uneCouleur = new ColorTransform( ) ; 
uneCouleur. color = couleur; 
objetAcolorier = new Transform(uneBulle); 
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objetAcolorier.colorTransform = uneCouleur; 
return uneBulle; 

} 

var laBulle:BulleClp = creerUneBulledOO, 200, OxFFOOOO); 
addChild(laBulle); 

Determinez : 

1. Quel est l'en-tete de la fonction ? 

2. Combien de parametres formels possede-t-elle ? Donnez leur type. 

3. Quel est le type du resultat fourni ? 

4. Quelles sont les instructions du script principal ? Quels sont les parametres reels de la 
fonction ? 

5. Apres avoir mis en correspondance les parametres reels et les parametres formels, 
expliquez le role de la fonction. Decrivez l'affichage realise par le script principal. 

6. A l'aide d'une boucle for, creez une dizaine de bulles placees au hasard sur la scene. 
Chaque bulle est stockee dans un tableau nomme 1 i steBul 1 e. 

Ecrire une fonction simple 
Exercice 7.2 

L'objectif de cet exercice est d'ecrire une fonction creerUneCouleurAuHasard( ) qui calcule 
une couleur au hasard. Les valeurs de rouge, vert et bleu sont chacune comprise entre une 
valeur minimale et maximale donnee. 

La valeur d'une couleur s'ecrit sous la forme d'une chaine de caracteres dont le format 
est : "OxRRVVBB". 

Les termes RR, VV et BB sont des valeurs numeriques ecrites en code hexadecimal. Pour 
obtenir cette chaine, vous devez : 

1. Ecrire une fonction qui utilise 6 parametres minR, maxR, minV, maxV, minB et maxR afin de 
calculer au hasard les quantites de rouge, vert et bleu comprises entre le minimum et 
le maximum pour chacune des couleurs. 



Remarque 

Le calcul d'une valeur comprise entre deux valeurs max et min s'obtientpar la formule : 
val eurAuHasard * ( max - min) + min 

En effet, si val eurAuHasard vaut 0, la valeur obtenue estegale a min etsi val eurAuHasard vaut 1, la 
valeur obtenue estegale a max. 



2. Transformer chacune des valeurs obtenues en code hexadecimal en appliquant la 
methode toString(16) sur chacune des valeurs tirees au hasard. 

3. Assembler chacune de ces valeurs par concatenation, en prenant soin de debuter la 
chaine de caracteres par le terme Ox. Enregistrer cette chaine dans une variable 
(couleur) de type String (voir la fonction creerUneCoul eur( ) a la section « Une palette 
de couleur », de ce chapitre). 

4. La fonction retourne en resultat le code couleur ainsi obtenu. 
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5. Le script principal affiche le code d'une dizaine de couleurs tirees au hasard. Pour 
chacune d'entre elles, les quantites de rouge sont comprises entre 100 et 255, 100 et 
170 pour le vert et 50 et 155 pour le bleu. 

Transmettre le resultat d'une fonction a une autre fonction 
Exercice 7.3 

Regroupez les deux fonctions des deux exercices precedents dans un meme fichier et 
faites en sorte d'afficher une dizaine de bulles de couleurs differentes au hasard sur la 
scene. 

Pour obtenir des bulles de couleurs differentes, vous devez : 

1. Calculer chaque couleur a l'aide de la methode creerUneCouleurAuHasarcK ). 

2. Transmettre la couleur obtenue a la fonction creerUneBulle( ). 

3. Repeter 10 fois ces deux operations a l'aide d'une boucle for. 

Attribuer une fonction a un gestionnaire d'evenement 
Exercice 7.4 

Chaque bulle se deplace au hasard sur la scene en rebondissant sur les bords. Le deplace- 
ment des bulles est realise a l'aide d'un gestionnaire d'evenement Event . ENTER_FRAME. 

1. Pour chaque bulle creee dans la boucle for, definir un gestionnaire d'evenement 
Event . ENTER_FRAME, en nommant Taction a realiser laBulleRebondit. 

2. En vous inspirant de l'exercice 4.3 realise au chapitre 4, « Faire des choix », ecrire la 
fonction laBulleRebonditO, en prenant soin de recuperer la reference de la bulle qui 
recoit l'evenement Event. ENTER_FRAME. Chaque bulle a sa propre vitesse variant entre 
10 et 20, selon l'axe des X et des Y. Ces vitesses sont recalculees a chaque fois que la 
bulle rebondit sur l'un des bords de la scene. 

Exercice 7.5 

Les deux boutons sont crees par 1' intermediate d'une fonction nommee creerUnBouton( ). 

1. En vous inspirant de la fonction creerUneForme( ) etudiee a la section « Une palette de 
couleur » de ce chapitre, ecrivez la fonction creerUnBouton( ) sachant que : 

- Chaque bouton est positionnable n'importe oil sur la scene. 

- La couleur est fixee a OxCCCCCC. 

- La hauteur et la largeur du bouton sont variables. 

- Le texte place au centre du bouton est variable. 

- La fonction creerUnBouton( ) retourne en resultat le bouton qu'elle vient de creer. 
Afin de verifier le bon fonctionnement de la fonction creerUnBouton ( ) : 

2. Creez et affichez un bouton btnLance, a 1/3 de la largeur de la scene, vers le bas, avec 
le texte « Lancer » 

3. Creez et affichez un bouton btnArret, a 2/3 de la largeur de la scene, vers le bas, avec 
le texte « Stopper » 
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Exercice 7.6 

Les deux actions realisees par les deux boutons Lancer et Stopper sont traitees par des 
gestionnaires d'evenements de type MouseEvent.MOUSEJJP. 

1. Ajoutez les deux gestionnaires d'evenements MouseEvent.MOUSE_UP aux boutons 
btnLance et btnArret. Les actions sont nominees 1 ancer et arreter respectivement. 

2. Ecrivez la fonction 1 ancer () qui ajoute a chaque bulle creee le gestionnaire 
Event. ENTER_FRAME, realise au cours de l'exercice 7.4. 

3. Ecrivez la fonction arreterO qui supprime pour chaque bulle creee le gestionnaire 
Event. ENTER_FRAME, realise au cours de l'exercice 7.4. 

Le projet mini site 

La mise en place des fonctions au sein du projet mini site va simplifier la lecture du code 
et sa mise a jour. Grace aux fonctions, nous pourrons aussi : 

• Visualiser une partie du contenu des pages, a savoir les vignettes presentant sous un 
format reduit, les photos, les animations ou les videos a visualiser. 

• Afficher le titre des rubriques et des pages. 

Gestion des elements graphiques 

Lorsque nous examinons le code ecrit au cours des chapitres precedents, nous observons 
que certaines actions relativement similaires se repetent tout au long de 1' application. 
Ce sont par exemple la creation des elements graphiques ou encore leur mise a jour. 

La fonction creerUneForme() 

Ecrivons la fonction creerUneForme( ) en observant que les operations pour creer une liste 
de rubriques ou encore une liste de pages utilisent le meme jeu d' instructions. Les quelques 
reflexions suivantes vous aideront a ecrire au mieux la fonction creerUneFormet ). 

• La definition de l'en-tete de la fonction passe par l'observation des instructions de 
creation des pages, rubriques et mini rubriques. Notez que dans le jeu de creations des 
rubriques, seuls les noms des objets, leur taille et leur positionnement changent. 

• La fonction cree localement un objet tmp de type Movi eCl i p au sein duquel est dessinee 
la zone rectangulaire. 

• La couleur, la position, la taille ainsi que son coefficient de transparence sont modifiees 
a l'aide des parametres definis dans l'en-tete de la fonction. 

• Le numero de la rubrique doit etre egalement stocke en ajoutant une propriete numero a 
P objet tmp. 

• Au final, la fonction retourne en resultat l'objet tmp au programme appelant. 

Une fois la fonction definie, retournez au script principal arm d'appeler la fonction 
creerUneForme( ). Notez que : 

• Les objets retournes par la fonction sont stockes dans les tableaux listePages[i], 
1 isteRubriques[i] et 1 isteMinis[i ], pour 1 variant de 0 au nombre de rubriques. 
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• Les valeurs passees en parametre reprennent, pour chaque objet cree, celles utilisees 
dans le programme ecrit au cours du chapitre precedent (positionnement, couleur...). 

La fonction initialiserUneForme() 

Lorsque l'utilisateur clique sur le titre du site ou sur l'une des mini rubriques, une 
nouvelle page s'affiche en utilisant des transitions de deplacement et/ou d'agrandisse- 
ment des formes. Pour que ces transitions fonctionnent correctement, chaque forme doit 
etre replacee a sa position initiale, avec sa taille initiale au debut de la transition. La fonction 
initialiserUneFormeO realise ces operations. 

La fonction initialiserUneFormeO est tres semblable a la fonction creerUneForme( ). 
Cependant, elle ne cree pas de nouvelle forme en memoire. Elle ne fait que mettre a jour 
les proprietes de la forme dont le nom est passe en parametre. 

Les proprietes mises a jour sont x, y, width et height. Lapropriete alpha est automatique- 
ment placee a 0 et la propriete vi si bl e a true. 

Lappel a la fonction initial i serUneForme( ) est realise lorsque l'utilisateur clique : 

• Sur une rubrique ou une mini rubrique. Les pages sont reinitialisees de facon a etre 
centrees et diminuees au centieme de leur valeur par defaut. 

• Sur le titre. Les pages sont reinitialisees de facon a etre centrees et diminuees au 
centieme de leur valeur par defaut. Les rubriques sont placees au hasard sur la scene 
avant de se deplacer a nouveau sur la scene. 

Gestion du contenu 

Lorsqu'une page s'affiche, les vignettes associees aux rubriques Photos, Animes et Videos 
apparaissent selon la page selectionnee. 

La fonction afficheVignette() 

La fonction afficheVignette( ) reprend une grande partie des instructions de la fonction 
afficherl_esPhotos( ) utilisee pour afficher l'ensemble des photos du trombinoscope 
etudie en section « Le trombinoscope - 2 e version » du chapitre 6, « Collectionner les 
objets ». 

La seule difference reside dans le fait qu'ici, les vignettes a afficher ne sont pas les 
memes d'une page a une autre. II est done necessaire de passer en parametre de la fonc- 
tion le nom de la rubrique auquel appartiennent les vignettes. La position de la premiere 
vignette a afficher ainsi que le nombre de vignette, doivent egalement etre places en 
parametre de la fonction. 



Remarque 

Le nom de la rubrique passe en parametre est utilise pourconstruire I'URL de chargementdes photos. 



Le corps de la fonction regroupe ensuite les instructions permettant l'affichage des 
vignettes en lignes et en colonnes comme indique en section « Afficher une liste de 
photos » du chapitre 6. 
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Chaque vignette chargee est a l'ecoute des evenements MouseEvent.MOUSE_OVER et 
MouseEvent.MOUSE_OUT afin de voir leur intensite diminuer lorsque la souris les survole. 
Ensuite, l'integralite des vignettes est placee dans un conteneur de type Sprite. 

Une fois rempli, le conteneur est retourne en resultat, a la fonction appelante. 

La fonction afficheVignette( ) est appelee lorsque l'affichage de la page a visualiser 
est termine. Les instructions d'appel de la fonction sont a placer dans le gestionnaire 
agrandi rPageEnYC ) comme suit : 

boiteAvignettes = afficheVignetted isteNoms[cible.numero] , nbElt[cible.numero], 30, 

finalYPage+30); 

addChild(boiteAvignettes ); 



Remarque 

Le tableau nbElt est un nouveau tableau, cree en meme temps que la liste des couleurs et des noms de 
rubrique. II contient le nombre de vignettes a afficher pour chaque rubrique. 

ts° Pour en savoir plus 

Le gestionnaire agrandi rPageEnY( ) est etudie a la section « Le projet mini site » du chapitre 6 « Collec- 
tionnerdes objets ». 

La fonction effacer() 

Lorsque l'utilisateur clique a nouveau, soit sur le titre, soit sur une mini rubrique, alors 
que les vignettes de la page courante sont affichees, les vignettes ne s'effacent pas. Nous 
devons les supprimer. 

Pour effacer les vignettes, il suffit de les supprimer de la liste d'affichage. Cette liste est 
stockee dans l'objet boiteAvignettes que vous aurez pris soin de declarer au meme niveau 
que les listes de page, de rubrique, etc. 

La suppression des vignettes doit etre effective a differents moments de 1' application. 
Aussi nous vous proposons d'ecrire la fonction effacert ) suivante : 

function effacer(cible:Sprite) :Sprite { 

//Si la cible existe 
if (cible != null) { 

//la supprimer de la liste d'affichage 

removeChild(cible) ; 

} 

//Retourner la valeur null 

return nul 1 ; 

} 

L'appel a la fonction eff acer( ) s'effectue alors comme suit : 

boiteAvignettes = effacer(boiteAvignettes) ; 

a l'interieur des gestionnaires clicSurRubriqueO et cl icSurTitre( ). 

Lutilisation de la fonction effacert ) permet non seulement d'effacer l'objet passe en 
parametre mais aussi de le supprimer de la memoire en l'initialisant a nul 1 . 
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Gestion du texte 

Chaque rubrique et chaque page affichent leur titre a la verticale sur le bord droit de la 
zone coloree. II n'existe pas de propriete ni de methode propre a ActionScript 3.0 pour 
ecrire un texte verticalement. La fonction creerTexteVerti cal ( ) realise cette operation. 

La fonction creerTexteVertical() 

A la difference du titre du site mini site qui est enregistre sous forme d'un symbole au 
sein de la bibliotheque, les titres des rubriques sont crees dynamiquement, lors de la creation 
des rubriques. 

La fonction creerTexteVerti cal ( ) prend done en parametre le nom de la rubrique, ainsi 
que sa position et sa couleur. La taille de la police varie selon que le texte est cree pour 
une rubrique ou une page. La taille de la police doit egalement etre passee en parametre 
de la fonction. 

La fonction creerTexteVerti cal ( ) est relativement complexe. Nous vous proposons de 
1' examiner par vous-meme afin de mieux la comprendre. 

function creerTexteVertical (nt:String, nx:Number, ny:Number, 

nc:uint, taille:uint):Sprite { 

//Creer un format d'ecriture en tenant compte de la taille et de la couleur du texte a creer 
var format:TextFormat = new TextFormat( "Ari sta" , taille); 
format. color=nc; 

format. align = TextFormatAl ign. CENTER; 
format. leading = -8; 

//Creer un tableau de caracteres a partir du texte fourni en parametre 
var 1 eTexte: Array =new ArrayO; 
for (var i:Number=0; i < nt. length; i++) ( 
leTexte[i] = nt.charAtO' ) ; 

} 

//Inserer un caractere de passage a la ligne (\n) entre chaque caractere du tableau 
var textVertical :String = leTexte. joint "\n" ) ; 

//Creer une zone de texte dynamique et placer le texte muni des caracteres \n 

//dans la propriete texte 

var tmp: Text Field = new TextFieldO; 

tmp.text = textVertical; 

tmp.defaultTextFormat = format; 

tmp. selectable = false; 

tmp. height = tmp.textHeight -100; 

tmp.autoSize = TextFieldAutoSize. CENTER; 

tmp.embedFonts = true; 

tmp.x = nx; 

tmp.y = ny; 

//Creer un filtre, les valeurs passees en parametre de DropShadowFi 1 ter sont 
//celles utilisees par les proprietes Filtre du clip TitreClp 
tmp. filters = [new DropShadowFilter(0, 45,0X000000,1,5,5,1.64,3)]; 
//Creer un conteneur pour y inserer le texte et un fond transparent. 
//Le fond transparent est place sur le texte, 

//le fond est utilise pour eviter que le curseur ne se transforme en fleche 
//lorsque la souris passe sur le texte. 
var boite:Sprite = new SpriteO; 
var fond:Sprite = new SpriteO; 
fond. graphics. begin Fill (OxFFFFFF) ; 

fond. graphics. drawRecttO, 0, tmp. textWidth+10, tmp.textHeight) ; 
fond, graphics .endFi IK); 
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fond.x = nx ; 
fond.y = ny; 
fond.alpha=0; 
addChi ld(fond) ; 
boite.addChild(tmp) ; 
boite.addChild(fond) ; 
return boite; 

} 

Nous avons insere quelques commentaires pour vous indiquer la raison d'etre de certaines 
instructions. Quelques proprietes sont utilisees sans commentaire, a vous d'aller chercher 
dans la documentation fournie avec Flash, pour comprendre leur utilite. Cela fait aussi 
partie du metier de programmeur que de savoir rechercher une information dans la docu- 
mentation... 

Afficher les titres 

La creation des titres de rubrique est realisee au moment de la creation des rubriques 
comme suit : 

//Pour chaque rubrique, creer un titre portant son nom, le positionner a droite de la rubrique 
listeTitreRubrique[i] = creerTexteVertical (1 i steNoms[i ] , 1 argeurRubrique -50, 20, 

listeCouleurs[i], 55); 
//et placer le titre dans la liste d'affichage de la rubrique. 
listeRubriques[i].addChild(listeTitreRubrique[i]); 

La creation des titres de pages est realisee lorsque l'affichage de la page est termine. Les 
instructions sont a placer dans le gestionnaire agrandi rPageEnY( ) comme suit : 

//Creer un titre portant le nom de la rubrique, le positionner a droite de la page 
titrePage = creerTexteVertical (listeNoms[cible.numero], 1 argeurPage-80, 

finalYPage+10, 1 isteCouleurs[cible.numero] ,70) ; 

I let afficher le titre 
addChild(titrePage) ; 

Le titre d'une page est place dans liste principale d'affichage de 1' application. II convient 
done d'effacer le titre des que l'utilisateur clique sur le titre du site ou sur une mini rubrique. 
Vous pouvez, a cette fin, utiliser la fonction effacer( ) decrite a la section precedente. 
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Tout au long de cet ouvrage, nous avons ecrit de nombreux programmes qui utilisent des 
objets au sens de la programmation orientee objet. Nos bulles de savon ou encore les 
photos du trombinoscope sont plus que de simples variables, ce sont des objets a part 
entiere. 

Dans ce chapitre, nous examinerons de facon tres precise ce que sont un objet et une 
classe, ainsi que les notions de programmation qui y sont attachees. 

Pour mieux comprendre les principes fondamentaux de la notion d'objet, nous etudierons en 
section « La classe Date, une approche vers la notion d'objet », comment creer et gerer 
des objets definis par le langage ActionScript. A partir de cette etude, nous analyserons 
les instructions qui font appel aux objets etudies afin d'en comprendre les principes de 
notation et d' utilisation. 

Nous examinerons ensuite a la section « Construire et utiliser ses propres classes » 
comment definir de nouveaux types de donnees. Pour cela, nous determinerons les 
caracteristiques syntaxiques d'une classe et observerons comment manipuler des 
objets a l'interieur d'une application et comment utiliser les methodes qui leur sont 
associees. 

Afin de clarifier les explications sur des concepts relativement complexes, vous trouverez 
dans ce chapitre des exemples que nous avons voulu simples et concis. Ces programmes 
n'utilisent pas de symboles graphiques ni d'evenements. lis ont ete ecrits afin d'eclairer, 
a chaque fois, un point precis du concept aborde. L' utilisation plus graphique de la 
programmation orientee objet est abordee au cours du chapitre 9, « Les principes du 
concept objet ». 

La classe Date, une approche vers la notion d'objet 

Le langage ActionScript propose un grand nombre d'outils pour manipuler les donnees 
ou traiter 1' information disponible au sein d'une animation. Dans cette section, nous 
examinons comment traiter les dates. 
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Traitement des dates 

Afficher la date ou l'heure a l'instant oil l'application est executee est une operation qui 
est demandee dans de multiples situations. De la meme facon, certaines applications trai- 
tant de la gestion de personnel ou d'abonnes a un service, sollicitent, de la part des 
utilisateurs, la saisie de leur date de naissance. 

Toutes ces operations requierent done des outils pouvant interroger le systeme de l'ordi- 
nateur pour connaitre la date et l'heure a un instant donne, ou encore de creer une variable 
pouvant contenir a la fois le jour, le mois et l'annee de naissance d'une personne. 

Cet outil est fourni par le langage ActionScript sous la forme d'une classe nominee Date. 
Declaration d'un objet de type Date 

Pour obtenir une variable de type Date, il convient de la declarer comme suit : 

var aujourdHui :Date = new DateO; 

Cette declaration permet de creer une variable appelee aujourdHui qui contient les valeurs 
correspondant a l'heure, au jour, au mois et a l'annee de l'instant oil l'instruction est executee. 

La declaration suivante : 

var anniv:Date = new Date(1993, 3, 16); 

est une autre facon d'obtenir une variable specifiant une date donnee, le premier parametre 
correspondant a l'annee, le second au mois et le troisieme au jour. 



Remarque 

Les mois de l'annee sont numerates de 0 a 11. La valeur 3 correspond done au mois d'avril. Si l'annee est 
comprise entre 0 et 99, celle-ci est automatiquement plac.ee entre 1900 et 1999. 



Avec le type Date, les trois valeurs correspondant au jour, au mois et a l'annee sont enre- 
gistrees sous un seul nom de variable, par exemple aujourdHui ou anniv. 

Le type Date n'est done pas un type simple mais structure : les variables aujourdHui et 
anni v ne sont pas de simples cases memoire contenant le jour, le mois, l'annee et l'heure 
de la date, elles contiennent l'adresse de la case sous laquelle se trouvent les informations 
relatives a la date (voir figure 8-1). Cette operation est realisee grace a l'operateur new. 



Figure 8-1 
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L'operateur new 

La declaration d'une variable de type Date s'effectue en deux etapes : 
var anniv:Date = new Date(1993, 3, 16); 

o © 

O La premiere etape consiste a definir le nom de la case me moire (voir figure 8-1-0). 
Dans notre exemple, la case memoire porte le nom anniv. A cet instant, les infor- 
mations caracterisant l'objet anniv ne peuvent etre stockees, car l'espace memoire 
servant a ce stockage n'est pas encore reserve. 

© Au cours de la seconde etape, l'operateur new est applique au constructeur Date( ) afin de : 

• calculer et reserver l'espace memoire necessaire pour stocker les donnees (date, 
jour, mois, heure...) passees en parametres ; 

• determiner l'adresse ou seront stockees ces informations (voir figure 8-1-©). 
Cette adresse est enregistree dans la case memoire anni v grace au signe d'affectation « = ». 

cs" Pour en savoir plus 

Le terme Date( ) place directement derriere l'operateur new est appele un « constructeur*. II s'agit d'une 
fonction particuliere de la classe dont nous parlerons plus precisement a la section « Construire un type 
Personne » de ce chapitre. 



Remarque 

Les variables de type Date ne contiennent pas directement I'information qui les caracterise, mais seule- 
ment l'adresse ou trouver cette information. Des lors, ces variables ne s'appellent plus des variables mais 
des objets. 



Les objets, au sens de la programmation objet, ne sont pas des variables de type simple 
(Number, Boolean, etc.). lis correspondent a un type qui permet de regrouper plusieurs 
donnees sous une meme adresse. 



Les dlfferentes methodes de la classe Date 

Une fois la date calculee, nous devons avoir la possibilite de la modifier, soit parce 
que l'utilisateur se rend compte qu'il s'est trompe lors de la saisie des valeurs, soit 
parce que nous voulons calculer une nouvelle date a partir de celle fournie par 
1' application. 

Pour realiser ces operations (consulter et ou modifier une date), le langage ActionScript 
propose un ensemble de methodes predefinies. 



Remarque 

Les methodes d'une classe sont comparables aux fonctions, mais la terminologie objet les appelle 
« methodes ». 
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Consulter ou modifier une date 

II existe un grand nombre de methodes associees a la classe Date. Parmi celles-ci nous 
trouvons : 



Methode 


Operation 


nptDfltpf ) 


Retourne le jour du mois, en fonction de I'heure locale. 


getMonth( ) 


Retourne le mois, en fonction de I'heure locale. 


getFullYearO 


Renvoie I'annee sous la forme de quatre chiffres, en fonction de I'heure locale. 


npt Hn 1 1 r ( ^ 


Retourne I'heure, en fonction de I'heure locale. 


getTime( ) 


Retourne le nombre de millisecondes ecoulees depuis le premier janvier 1970 a minuit, 
temps universel. 


setDate( ) 


Definit le jour du mois, en fonction de I'heure locale, et envoie les nouvelles informations 
horaires, en millisecondes. 


setMonth( ) 


Definit le mois, en fonction de I'heure locale, et renvoie les nouvelles informations horaires, 
en millisecondes. 


setFullYearO 


Definit I'annee complete, en fonction de I'heure locale, et renvoie les nouvelles informations 
horaires, en millisecondes. 


setTime( ) 


Definit la date, en millisecondes, et renvoie les nouvelles informations horaires, en milli- 
secondes. 


toString( ) 


Renvoie une chaine de caracteres representant la date et I'heure stockees dans I'objet 
Date sur lequel la methode est appliquee. 



Remarque 

Les methodes commencant par set sont utilisees pour modifier une date, alors que celles debutant par 
get permettentde recuperer tout ou partie de la date.. 

Exemple d'utilisation de dates 

L'exemple suivant utilise quelques methodes du tableau precedent. 

//O Declaration de I'objet anniv 

var anniv:Date = new Date(1996, 3, 16); 

//© Definition du tableau des mois 

var moisrArray = ["janvier", "fevrier", "mars", "avril", "mai", 
"juin", "juillet", "aout", "septembre" . 
"octobre", "novembre", "decembre"]; 

//© Affichage du mois de I'annee de naissance 
traceCMois n' "+ anniv. getMonth( )) ; 

//© Affichage de la date de naissance 

trace(" Date de naissance : " + anniv. getDate( ) + " " + 

mois[anniv.getMonth( )]+ " " + anniv. getFullYearO); 

//© Affichage de I'annee de la date de naissance 
traceCElle est nee en "+ anniv. getFullYearO); 

//© Modification de I'annee de naissance 
anniv. setFullYear(1993) ; 

traceC'Je me suis trompee, el 1 e est nee en "+ anni v .getFul 1 Year( ) ) ; 
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Extension web 

Vous pourrez tester cet exemple en executant le fichier LaClasseDate.fi a, sous le repertoire Exem- 
ples/chapitre8. 

O L'objet anni v est initialise a 1996 pour l'annee, a 3 pour le mois et a 16 pour le jour. 

© Le tableau mois est compose de la liste des mois de l'annee. Le mois de janvier est 
place a l'indice 0, le mois de decembre a l'indice 11, ce qui permet d'associer correc- 
tement les numeros du mois a leurs noms. Le mois de janvier a pour valeur 0 dans la 
classe Date (voir 0). 

© L' application affiche, dans la fenetre de sortie, la valeur correspondant au mois enre- 
gistre dans l'objet anniv soit : 

Mois n' 3 

0 L application affiche, dans la fenetre de sortie, la date de naissance soit : 
Date de naissance : 16 avril 1996 

L'instruction anniv. getMonth( ) retourne la valeur 3, ce qui correspond a l'indice du mois 
d' avril dans le tableau Mois. 

© L application affiche, dans la fenetre de sortie, l'annee de naissance soit : 
Elle est nee en 1996 

0 L'instruction anniv. setFullYear(1993) modifie l'annee de naissance. La valeur placee 
en parametre est comprise entre 0 et 99, la nouvelle valeur enregistree est 1993. 

L' application affiche, dans la fenetre de sortie, la nouvelle date de naissance soit : 
Je me suis trompee, elle est nee en 1993 



Question 

Que se passe-t-il si I'utilisateursaisit une date erronee, par exemple le 29 fevrier 2005 ? 
Reponse 

Le lecteur Flash rectifie de lui-meme I'erreur, en calculant la date la plus proche de celle demandee. Ainsi, 
si I'on cree la date : 

var mauvaiseDate:Date = new Date(2005, 1, 29); 

La date enregistree dans mauvaiseDate sera le l er mars 2005. 

Question 

Que se passe-t-il lorsque I'on cree la date suivante ? 

var motDateiDate = new Date(2005, "fevrier", 29); 

Reponse 

Le terme "fevrier" n'est pas une valeur numerique, mais une suite de caracteres, le lecteur Flash 
signale une erreurde type « Incompatibility de types. ». L'application ne peuts'executer. 
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Appliquer une methode a un objet 

L' observation des exemples precedents montre que l'appel d'une methode de la classe 
Date ne s'ecrit pas comme une simple instruction d'appel a une methode (fonction), telle 
que nous l'avons etudiee jusqu'a present. 

Comparons l'appel a une methode de la classe Math a celui d'une methode de la classe 
Date. 

Par exemple, pour calculer la valeur absolue d'une variable x, les instructions sont les 
suivantes : 

var x:Number = 4; 

var y:Number = Math.abs(x); 

Pour retrouver le mois d'une date donnee, les instructions sont : 

var aujourdHui : Date = new DateO; 

var mois: Number = aujourdHui .getMonth( ) ; 

Comme nous le constatons, dans le premier cas, la fonction Math.absO s' applique a la 
variable x, en passant la valeur de x en parametre. En effet, les variables x et y ne sont pas 
des objets au sens de la programmation objet. Elles sont de type Number et representent 
simplement le nom d'une case memoire dans laquelle 1' information est stockee. Aucune 
methode, aucun traitement n'est associe a cette information. 

Dans la seconde ecriture, la methode getMonthO est appliquee a l'objet aujourdHui par 
l'intermediaire d'un point (.) place entre le nom de l'objet et la methode. L'objet 
aujourdHui ne peut etre considere comme une variable. II est de type Date. L'information 
representee par ce type n'est pas simple. Elle represente (voir figure 8-2) les elements 
suivants : 

• d'une part, une reference (une adresse) vers un ensemble de valeurs stockees dans 
plusieurs cases memoire distinctes ; 

• d' autre part, un ensemble de methodes propres qui lui sont applicables. Ces methodes 
sont l'equivalent d'une boite a outils qui opere uniquement sur les objets de type Date. 



Figure 8-2 
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Question 

Les instructions suivantes sont-elles valides ? 

var x:Number = x.Math.sqrt( ) ; 
var mois:Number = getMonth(mois) ; 

Reponse 

Aucune des deux instructions n'estvalide. En effet, dans la premiere instruction, la fonction Math.sqrtO 
estappliquee a x qui n'estpas un objet, mais une variable de type Number. 
Dans la seconde instruction, la methode getMonthO est employee comme une simple fonction, alors 
qu'elle ne peutetre appelee qu'a travers un objet de type Date. 



Autrement dit, une classe represente un type constitue a la fois de donnees (informations, 
proprietes) et d'outils (methodes). 



Figure 8-3 
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Quelle qu'elle soit, une classe correspond a un type, qui specifie une association de 
donnees (informations ou valeurs de tous types) et de methodes (outils d'acces et de trans- 
formation des donnees). Ces methodes, definies a l'interieur d'une classe, ne peuvent 
s'appliquer qu'aux donnees de cette meme classe. 

Grace a cette association, une classe permet la definition de nouveaux types de donnees, 
qui structurent l'information a traiter (voir la section « Construire et utiliser ses propres 
classes » de ce chapitre). 

Principes de notation 

A cause de cette difference fondamentale de representation de l'information, l'emploi 
des methodes a travers les objets utilise une syntaxe particuliere. 

Pour un objet de type Date, cette syntaxe est la suivante : 

//Declaration et initialisation 

var objet:Date = new Datediste des parametres eventuels); 

//La methode s 'applique a objet 

objet. nomDeLaMethodediste des parametres eventuels); 

Pour appliquer une methode a un objet, il suffit de placer derriere le nom de l'objet un 
point suivi du nom de la methode et de ses parametres. 
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Remarque 

Par convention : 

• Tout nom de methode commence par une minuscule. 

• Si le nom de la methode est compose de plusieurs mots, ceux-ci voient leur premier caractere passer 
en majuscule. 

• Le nom d'une classe commence toujours par une majuscule. 



Grace a cette ecriture, l'objet est associe a la methode de facon a pouvoir modifier 
l'information (les donnees) contenue dans l'objet. Cette technique permet de recuperer 
les differentes donnees modifiees localement par une methode. Elle est le principe de 
base du concept d'objet, decrit et commente au chapitre suivant. 

Construire et utiliser ses propres classes 

L'etude de la classe Date montre qu'une classe correspond a un type de donnees. Ce type 
est compose de donnees et de methodes les exploitant. La classe Date est un type prede- 
fini du langage ActionScript. 

Le langage ActionScript propose un grand nombre de types predefinis (classes natives). 
Ces classes sont des outils precieux et efficaces, qui simplifient le developpement des 
applications. Differentes classes sont examinees au cours des chapitres suivants. 

L'interet des classes reside aussi dans la possibility de definir des types structures, 
propres a un programme. Grace a cette faculte, le programme se developpe de fagon plus 
sure, les objets qu'il utilise etant definis en fonction du probleme a resoudre. 

Avant d'etudier reellement l'interet de la programmation objet et ses consequences sur 
les modes de programmation (voir le chapitre 9, « Les principes du concept objet »), 
nous examinerons dans les sections suivantes comment creer des types specifiques et 
comment utiliser les objets associes a ces nouveaux types. 

Definir une ciasse et un type 

Definir une classe, c'est construire un type structure de donnees. Avant de comprendre 
les avantages d'une telle construction, nous abordons ici la notion de type structure (et 
done de classe) d'un point de vue syntaxique. 

Pour definir un type, il suffit d'ecrire une classe qui, par definition, est constituee de 
donnees et de methodes (voir figure 8-3). La construction d'une classe est realisee selon 
les deux principes suivants : 

1. Definition des donnees a l'aide d' instructions de declaration de variables et/ou 
d'objets. Ces variables sont de type simple, tel que nous l'avons utilise jusqu'a 
present (Number, etc.) ou de type compose, predefini ou non (String, Date, etc.). 

Ces donnees decrivent les caracteristiques de l'objet que Ton souhaite definir. 
Elles sont aussi communement appelees « champ », « attribut » ou « membre de la 
classe ». 
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2. Construction des methodes definies par le programmeur. Ce sont les methodes 
associees aux donnees. Elles se construisent comme de simples fonctions, composees 
d'un en-tete et d' instructions, comme nous l'avons vu aux chapitres precedents. 

Ces methodes represented tous les traitements et comportements de l'objet que Ton 
cherche a decrire. 

En definissant de nouveaux types, nous determinons les caracteristiques propres aux 
objets que Ton souhaite programmer. Un type d'objet correspond a l'ensemble des 
donnees traitees par le programme, regroupees par theme. 

Un objet peut etre une personne, si l'application a developper gere le personnel d'une 
societe, ou un 1 ivre, s'il s'agit d'un programme destine a la gestion d'une bibliotheque. 
Signalons que l'objet personne peut aussi etre utilise dans le cadre d'un logiciel pour 
bibliotheque, puisqu'un lecteur empruntant un livre est aussi une personne. 

Construire un type Personne 

Examinons, sur un exemple simple, la demarche de construction d'un type structure. 
Observons pour cela comment construire les types de donnees qui decrivent au mieux la 
representation d'une personne. 

Cette realisation passe par deux etapes : rechercher les caracteristiques propres a toute 
personne et definir le comportement d'une personne. 

Rechercher les caracteristiques propres a toute personne 

D'une maniere generale, toute personne est definie par son nom et son prenom. II peut 
etre necessaire dans certains cas, de connaitre sa date de naissance. 

Les caracteristiques d'une personne sont done : 

• le prenom ; 

• le nom ; 

• la date de naissance, e'est-a-dire les valeurs correspondant au jour, au mois et a 
l'annee de naissance. 

Toutes ces donnees sont representables a l'aide de chaines de caracteres et de valeurs 
numeriques enregistrees dans un objet de type Date. 

Pour declarer les donnees d'une personne, nous ecrivons les declarations suivantes : 

//Definition du prenom 

public var prenom:String; 

//Definition du nom 

public var nom:String; 

//Definition de la date de naissance 

public var dateNaissance:Date; 

D3= Pour en savoir plus 

Le terme public est explique au chapitre 9, « Les principes du concept objet », section « Les objets 
controlent leur fonctionnement ». 
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Definir le comportement d'une personne 

D'un point de vue informatique, le premier comportement d'un objet, quel qu'il soit, est 
sa creation. Toute classe possede une methode qui permet de creer des objets en speci- 
fiant pour chacun les valeurs caracteristiques de cette classe. 



Remarque 

Les methodes qui ont pour objectif de creer un objet en indiquant une valeur specifique a chaque attribut 
de la classe sont appelees des « constructeurs ». Ces methodes ont la particulate de porter le meme 
nom que la classe. 



Le constructeur de la classe Personne est done le premier comportement a definir (voir la 
methode Personne( ) dans le code source ci-dessous). 

Ensuite, un comportement attendu d'une personne est qu'elle soit en mesure de se 
presenter, e'est-a-dire de donner son nom, son prenom (voir la methode sePresenteO 
dans le code source ci-dessous), et d'indiquer son age (voir la methode get Age ( ) dans le 
code source ci-dessous). 

La classe descriptive du type Personne 

En ActionScript, une classe est definie dans un fichier d' extension .as. 

Pour editer un fichier d'extension .as dans l'environnent Flash, il suffit de selectionner 
l'item Nouveau du menu Fichier. Lorsque la boite de dialogue Nouveau document apparait, 
double-cliquez sur la rubrique Fichier ActionScript. 

Apres avoir cree un document nomme scri pt-1, inserez les instructions ci-apres et sauve- 
gardez le fichier sous le nom Personne. as. 



Extension web 

Vous trouverez le fichier Personne. as, sous le repertoire Exemples/chapitre8. 



//Definition du package 
package { 

//Definition de la classe Personne 
public class Personne { 

//Definition des attributs de la classe 

public var prenom:String; 

public var nom:String; 

public var dateNaissance:Date; 

//Definition de la fonction constructeur 

public function Personne ( p:String, n:String, j:Number, m:Number, a:Number) ( 
prenom = p; 
nom = n 

dateNaissance = new Dateta, m, j); 

} 

//Definition du comportement sePresenteO 
public function sePresente( ) :String { 
var age:Number = getAgeO 

return "Je m'appelle " + prenom + " " + nom + "XnJ'ai " + age + " ans "; 

} 
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//Definition de la methode calculant l'age de la personne 
public function getAget ): Number { 

var aujourdHui :Date = new DateO; 

var age:Number = 

aujourdHui .getFullYearO - dateNaissance.getFullYearO; 
return age; 

} 

} //Fin de la classe Personne 
} //Fin du package 

• Le package 

En ActionScript 3.0, une classe est toujours definie a l'interieur d'un package. Les 
packages sont utilises pour regrouper les classes par theme. A l'interieur d'un package, 
sont rassemblees les classes de meme fonctionnalite. 

Ainsi, par exemple, toutes les classes definissant des objets a afficher comme Shape, 
Sprite ou encore MovieClip sont definies dans le package flash. display. Ce qui veut 
dire que le fichier MovieClip. as dans lequel sont definies les proprietes et methodes de 
la classe MovieClip, est enregistre dans le repertoire flash/display du code source de 
l'application Flash. Le package dans lequel est definie la classe Movi eCl i p a pour nom 
fl ash .di spl ay grace aux instructions : 

package flash. display { 

//Definition de la classe MovieClip 

placees a l'interieur du fichier MovieCl ip.as. 

Dans le jargon informatique, on dit alors que le package flash, display constitue une 
librairie. Les classes de la librairie flash. display sont disponibles pour n'importe 
quelle autre classe apres importation de cette derniere dans votre classe personnalisee. 
II est possible d'importer une seule classe d'un package en specifiant le nom de la 
classe a importer, par exemple : 

import flash. display. MovieClip ; 

L instruction : 

import flash. display.* ; 

rend disponible toutes les classes du package flash. display, a la classe dans laquelle 
l'instruction d'import est ecrite. 



Remarque 

Les instructions d'import se situent dans le bloc d'instructions package {...}, juste avant l'instruction 
public class ... 



Un package ne possede pas obligatoirement de nom. Ici, la classe Personne est definie 
a l'interieur d'un package sans nom comme suit : 

package { 

//Import de librairies 
public class Personne { 

//Instructions 

} 

} 

Dans ce cas, on dit que la classe Personne fait partie du package de niveau superieur. 
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• La classe 

Ensuite, la classe Personne, decrite a l'interieur d'un fichier appele Personne.as, definit 
un type de donnees compose de trois attributs caracteristiques d'une personne, a savoir 
son nom, son prenom et sa date de naissance, ainsi que trois comportements differents 
(Personne ( ), sePresente( ) et getAge( )). 

Le lecteur Flash comprend que les attributs et les methodes decrivant une Personne sont 
ecrits a l'interieur d'une classe, grace aux instructions publ 1 c cl ass ... { } qui entourent 
la declaration des proprietes et la definition des methodes : 

public class Personne { 

//Definition des attributs 
//Definition des methodes 

} 



Remarque 

Le nom figurant immediatement apres le terme cl ass definit le nom de la classe, il correspond obligatoi- 
rement au nom du fichier dans lequel sont enregistrees les instructions. 



Une classe definit done un bloc constitue d' instructions et representable sous la forme 
suivante (voir figure 8-4) : 



package 
{ 



public class Personne 
( 

public var prenom : String 
public var nom : String ; 
public var Date : dateNaissance ; 



dateNaissance 



public function Personne (nrStifind, p: String, 
j : Number , m : Nurnbery a : Numbe r ) 



prenom = p; 



nom = n; 

dateNa i ssance = new Date (a , m, j ) , 



public function sePresente ( 

{ 

// . . . 

return "Je m'appelle " + preno: 




public function getAge ( ) : Number 
{ 

// . . . 

return .... 



Figure 8-4 

Les donnees nom, prenom et dateNaissance du type Personne sont declarees en dehors de toute fonction. 
N'importe quelle modification de ces donnees est done visible par V ensemble des methodes de la classe. 
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Quelques observations 

Suivant la description de la figure 8-4, nous constatons que les donnees nom, prenom et 
dateNaissance sont declarees en dehors de toute fonction. Par consequent, chaque 
methode a acces aux valeurs qu'elle contient a tout moment, soit pour les consulter, soit 
pour les modifier. 

Les methodes sePresente( ) et getAge( ) ne font que consulter le contenu des donnees 
nom, prenom et dateNaissance pour les afficher ou les utiliser en vue d'obtenir un nouveau 
resultat. 



Remarque 

La methode getAge( ) calcule I'age d'une personne, elle ne modifie pas les proprietes de I'objet. C'est 
pourquoi nous avons choisi d 'utiliser le terme get, a I'instardes methodes de la classe Date. 



Au contraire, la methode PersonneO change le contenu des donnees nom, prenom et 
dateNaissance. Ces modifications, realisees a l'interieur d'une methode, sont aussi visibles 
depuis les autres methodes de la classe. 

II existe done deux types de methodes : celles qui permettent d' acceder aux donnees de 
la classe et celles qui modifient ces donnees. 

ds= Pour en savoir plus 

Voir la section « Les methodes d'acces aux donnees » du chapitre 9, « Les principes du concept objet ». 

Bien entendu, une classe est definie pour etre utilisee dans un script (une application) 
d'extension .fl a. Nous abordons plus en detail cette operation ci-apres. 

Delink un objet 

Apres avoir defini un nouveau type structure, l'etape suivante consiste a ecrire une appli- 
cation qui utilise effectivement un objet de ce type. Pour cela, le programmeur doit decla- 
rer les objets utiles a 1' application et faire en sorte que l'espace memoire necessaire soit 
reserve. 

Declarer un objet 

Cette operation simple s'ecrit comme une instruction de declaration, a la difference pres 
que le type de la variable n'est plus un type simple predefini, mais un type structure, tel 
que nous 1' avons construit precedemment. Ainsi, dans : 

I //Declaration d'un objet chose 
var chose:TypeDeL_Objet; 

TypeDeL_Objet correspond a une classe definie par le programmeur. Dans notre exemple, 
la declaration d'une personne untel est realisee par l'instruction : 



var untel :Personne; 
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Cette declaration cree une case memoire, nominee untel, destinee a contenir une refe- 
rence vers l'adresse ou sont stockees les informations concernant la personne untel . A ce 
stade, aucune adresse n'est encore determinee. 



untel 

0x11022033 



Figure 8-5 

La declaration d'un objet reserve une case memoire destinee a contenir Vespace memoire ou seront stockees 
les informations. L'espace memoire et l'adresse ne sont pas encore reserves pour realiser ce stockage. 



Reserver l'espace memoire 

C'est l'operateur new qui, comme nous l'avons remarque lors de l'etude de la classe Date, 
est charge de la reservation de l'espace memoire. Lorsqu'on applique cet operateur a un 
objet, il evalue combien d'octets lui sont necessaires pour stocker l'information contenue 
dans la classe (proprietes et methodes de la classe), et determine l'adresse sous laquelle 
ces informations seront stockees. 

L'operateur new fait appel au constructeur de la classe afin d'initialiser correctement les 
proprietes de 1' objet a construire. 

I //Reserver de l'espace memoire pour 1 'objet chose 
chose = new TypeDeL_Objet( ) ; 

Dans notre exemple, la reservation de l'espace memoire pour definir une personne untel 
s'ecrit : 

untel = new PersonneCElena", "T.", 16, 3, 1993); 

Notons qu'il est possible de declarer et de reserver de l'espace memoire en une seule 
instruction : 

var untel : Personne = new PersonneCElena", "T.", 16, 3, 1993); 

Lors de cette reservation, les valeurs passees en parametres de la fonction constructeur 
initialisent les proprietes de l'objet untel qui a pour prenom et nom Elena T., et dont la 
date de naissance est le 16 avril 1993 (voir figure 8-6). 



Remarque 

L'objet ainsi defini est un representant particulier de la classe, caracterise par I'ensemble de ses donnees. 
Dans le jargon informatique, on dit que l'objet untel est une « instance » ou encore une « occurrence » 
de la classe Personne. Les donnees qui le caracterisent, a savoir nom, prenom et dateNai ssance, sont 
appelees des « variables d'instance ». 



Une instance est done, en memoire, un programme a part entiere, compose de varia- 
bles et de fonctions. Sa structure est telle qu'elle ne peut s'executer et se transformer 




0x11022033 
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(c'est-a-dire modifier ses propres donnees) qu'a l'interieur de cet espace. C'est pourquoi 
elle est considered comme une entite independante ou « objet » 



uneFille 



0x11022033 



0x11022033 


, nom 


.prenom 


. dateNaissance 




T. 


@ vers un objet 
de type Date 
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s&Presente M 









. ouelAae M - 









Figure 8-6 

Pour chaque objet cree, Voperateur new reserve un espace memoire suffisamment grand pour y stocker 
les donnees et les methodes descriptives de la classe. L'adresse est alors determinee. 



Les instances (occurrences) ont ete abordees plusieurs fois au cours des chapitres prece- 
dents, notamment au cours du chapitre 2, « Les symboles », section « Les differentes 
facons de creer des occurrences ». 

Un symbole place dans la librairie d'une animation Flash peut etre considere comme 
l'equivalent graphique d'une classe decrite par un script. Tout comme l'instance d'une 
classe (Personne) possede des proprietes (nom, prenom...) et des methodes (getAgeO, 
sePresente( )), l'occurrence d'un symbole (MovieClip) possede des proprietes (x, y...) et 
des methodes (gotoAndPl ay ( ) . . .). 

Manipuler un objet 

Un objet (une occurrence) ainsi defini est entierement determine par ses donnees et ses 
methodes. II est des lors possible de modifier les valeurs qui le caracterisent et d'exploiter 
ses methodes. 

Acceder aux donnees de la classe 

Pour acceder a une donnee de la classe de facon a la modifier, il suffit d'ecrire : 

I //Acceder a un membre de la classe 

chose. nomDeLaDonnee = valeur du bon type; 

en supposant que le champ nomDeLaDonnee soit defini dans la classe correspondant au type 
de l'objet chose. 

Dans notre exemple, la modification du nom et du prenom de untel s'ecrit de la facon 
suivante : 

untel. prenom = "Nicolas"; 
untel .nom = "C. " ; 
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Les cases memories representant les variables d'instance (nora, prenom et dateNai ssance) de 
l'objet untel sont accessibles via l'operateur point (.). 



Remarque 

La propriete dateNai ssance d'une personne n'estpas directement accessible. Ainsi, pour definir I'annee 
de naissance d'une personne, il convient d'utiliser la methode setFul lYear( ) de la classe Date comme 
suit : 

untel .dateNai ssance. set Full Year (1996) ; 

Acceder aux methodes de la classe 

Pour appliquer une methode de la classe a un objet particulier, la syntaxe utilise le meme 
principe de notation : 

I //Appliquer une methode a l'objet chose 

chose. nomDeLaMethoded iste des parametres eventuels); 

en supposant que la methode ait prealablement ete definie pour le type de l'objet chose. 
Dans notre exemple, l'application de la methode getAge( ) a l'objet untel s'ecrit : 

var age:Number = untel .getAget ) ; 



Remarque 

En choisissant des noms de methodes appropries, la comprehension des instructions en programmation 
objet devient tres intuitive. 

Une application qui utilise des objets Personne 

L' exemple suivant montre comment exploiter, dans une application, l'ensemble des 
donnees et des methodes definies dans la classe Personne. 

Exemple : code source complet 



Extension web 

Vous trouverez l'application CreerDesPersonnes.fi a, sous le repertoire Exemples/chapitre8. 



//© Creer une instance uneFille 

var uneFille:Personne = new PersonneC'Elena" , "T.", 16, 3, 1993); 

//© Utiliser les methodes de la classe Personne 
trace(uneFi 1 le.sePresentet ) ) ; 
traceCage : " + uneFi 1 1 e.getAge( ) ) ; 

//© Creer une instance gargon avec des valeurs nulles 
var garcon:Personne = new Personne( "" , "" , 0, 0, 0); 
//© Modifier les proprietes de 1 'occurrence garcon 
unGarcon .nom = "C. " ; 
unGarcon. prenom = "Nicolas"; 
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//© Utiliser les methodes de la classe Date 

unGarcon .da teNaissance.setDatet 10) ; 

unGarcon .da teNaissance. set Ful 1 Year (1996) ; 

unGarcon .da teNaissance. setMonth(6) ; 

//© Utiliser les methodes de la classe Personne 

trace(unGarcon.sePresente( ) ) ; 

Le code source est enregistre sous le nom CreerDesPersonnes.fi a, dans le meme repertoire 
que Personne. as. 

Execution d'une application multifichier 

L' application, decrite dans le fichier CreerDesPersonnes.fi a, utilise le type Personne defini 
dans le fichier Personne. as. Deux fichiers distincts sont done necessaires pour ecrire un 
programme qui utilise des objets Personne. 

Bien que cela puisse paraitre curieux pour un debutant, l'application CreerDesPersonnes . f 1 a 
s'execute correctement malgre cette separation des fichiers. Examinons comment fonc- 
tionne 1' ordinate ur dans un tel cas. 

L' execution d'une animation dans l'environnement Flash s'effectue en deux temps : 

• la phase de lecture du script avec transformation en code binaire ; 

• la phase d' execution de 1' animation. 

Lorsque l'application est concue avec plusieurs fichiers, ces deux phases sont egalement 
indispensables. 

Lecture de scripts multifichiers 

Lorsque vous testez une animation, le lecteur Flash transforme le script en un code 
binaire directement comprehensible par l'ordinateur (voir le chapitre introductif « A la 
source d'un programme », section « Executer l'animation »). 



Remarque 

La phase de transformation d'un code source en un executable binaire est appelee dans le jargon infor- 
matique la « phase de compilation ». C'esta ce stade que le lecteur Flash detecte les eventuelles erreurs 
de syntaxe. 



Si votre script est defini sur plusieurs fichiers, la question se pose de savoir comment 
Flash examine l'ensemble de ces fichiers. 

Pour simplifier la tache de la personne qui developpe des applications, le lecteur Flash est 
construit de facon a retrouver les differents scripts necessaires a 1' execution. 

Au cours de la compilation, le lecteur Flash constate de lui-meme, au moment de la 
declaration des objets, que l'application utilise des objets d'un type non predefini par le 
langage ActionScript. 

A partir de ce constat, il recherche, dans le repertoire oil se trouve l'application qu'il 
compile, le fichier dont le nom correspond au nouveau type qu'il vient de detecter et dont 
l'extension est .as. Tout script definissant une classe ActionScript a pour nom celui de la 
classe (du type) qu'il definit. 
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Dans notre exemple, en compliant l'application CreerDesPersonnes.fi a, le lecteur Flash 
detecte le type Personne. II recherche alors le fichier Personnels dans le repertoire ou se 
trouve l'application. 

• S'il trouve ce fichier, il le compile egalement. En fin de compilation, deux fichiers 
ont ete traites, CreerDesPersonnes.fi a et Personne. as. Si le compilateur ne detecte 
aucune erreur, il integre le code binaire associe a la classe Personne au fichier 
CreerDesPersonnes.swf au moment de l'exportation. 

• S'il ne trouve pas le fichier Personne. as, il signale une erreur de compilation qui 
indique qu'il ne peut charger la classe correspondant au type declare (Ce type est 
introuvable ou n'est pas une constante de compilation : Personne). 

Pour corriger cette erreur, il est possible d'indiquer au lecteur Flash quels sont les reper- 
toires susceptibles de contenir des scripts. 

Le chemin de classe (classpath) 

Par defaut, le lecteur Flash examine le chemin de classe global defini par l'environnement 
Flash et recherche les scripts annexes a l'application, soit : 

• dans le repertoire ou se trouve le fichier . f 1 a a executer ; 

• dans le repertoire \Program Fi 1 es\Adobe\Adobe Flash CS3\fr\First Run\Cl asses. 

II est possible de modifier le chemin de classe global en supprimant ou en ajoutant de 
nouveaux repertoires ou le lecteur Flash pourra rechercher les scripts annexes. Pour cela, 
vous devez : 

• selectionner l'item Preferences du menu Modifier. Le panneau Preferences ci-apres 



apparait : 



Figure 8-7 




Le panneau Preferences 
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• selectionner la rubrique ActionScript situee dans la partie gauche du panneau, puis 
cliquer sur le bouton ActionScript situe en bas a droite du panneau pour faire appa- 
raitre la boite de dialogue Parametres d' ActionScript 3.0 (voir figure 8-8). 
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• Lorsque la boite de dialogue Parametres d' ActionScript 3.0 s'affiche (voir figure 8-8), 
l'ajout d'un chemin de classe s'effectue en cliquant sur le bouton +, la suppression sur 
le bouton -. 



Figure 8-8 
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La modification du chemin de classe global reste valide pour toutes les applications et les 
scripts a venir. Si vous souhaitez modifier le chemin de classe pour un document en parti- 
culier, la demarche est la suivante : 

• Selectionnez l'item Parametres de publication du menu Fichier. Le panneau Parame- 
tres de publication ci-apres apparait. 



Figure 8-9 
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• Selectionnez l'onglet Flash. 

• Cliquez sur le bouton Parametres... situe a droite du champ Version d' ActionScript. 
La boite de dialogue Parametres d' ActionScript 3.0 apparait (voir figure 8-10). 
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L'ajout d'un chemin de classe specifique au document s'effectue en cliquant sur le 
bouton +, la suppression sur le bouton -. 



Figure 8-10 

La boite de dialogue 
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Analyse des resultats de I'application CreerDesPersonnes.fla 

Au cours des sections precedentes, nous avons observe que tout objet declare contenait 
l'adresse oil sont stockees les informations relatives a cet objet. Ainsi, pour acceder aux 
donnees et methodes de chaque objet, il suffit de passer par l'operateur « . ». 

Grace a cette nouvelle fagon de stacker l'information, les transformations d'un objet par 
l'intermediaire d'une methode de sa classe sont visibles pour tous les objets de la meme 
classe. Autrement dit, si une methode fournit plusieurs resultats, ces modifications sont 
visibles en dehors de la methode et pour toute I'application. 

Pour mieux comprendre cette technique, examinons comment s' execute le programme 
CreerDesPersonnes. 

O Creer une instance une Fil le : 

var uneFille:Personne = new Personnel "Elena" , "T.", 16, 3, 1993); 

L' occurrence uneFille est creee grace au constructeur de la classe Personne. Le nom, le 
prenom et la date de naissance sont passes en parametres du constructeur. Ces valeurs 
sont alors directement enregistrees dans les proprietes de l'objet uneFi 1 1 e. 

© Utiliser les methodes de la classe Personne : 

trace(uneFil le.sePresentet ) ) ; 
traceC'age : " + uneFi 1 1 e.getAget ) ) ; 

La methode sePresente( ) appliquee a l'objet uneFille retourne en resultat une chaine de 
caracteres qui contient les valeurs enregistrees dans les proprietes de l'occurrence, soit : 



Je m'appelle Elena T. 
J'ai 14 ans 
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La methode getAge( ) calcule et retourne l'age a partir de la date de naissance enregistree 
dans la propriete dateNaissance de l'occurrence uneFille et la date courante. La fonction 
trace( ) affiche : 



age : 14 ans 

© Creer une instance unGarcon : 

var unGarcon : Personne = new PersonneC'","", 0, 0, 0); 
trace(unGarcon.sePresente( )) ; 

L'occurrence unGarcon est creee grace au constructeur de la classe Personne. Des valeurs 
vides sont passees en parametres pour les chaines de caracteres et nulles pour les valeurs 
numeriques. 

L'affichage provoque par l'appel de la methode sePresente( ) appliquee a l'objet unGarcon 
est alors le suivant : 



Je m' appel 1 e 
J'ai 108 ans 

Aucun affichage ne peut etre realise pour le prenom et le nom de l'objet unGarcon puisque 
les valeurs passees en parametres du constructeur sont vides (""). L'annee 0 du mois 0 du 
jour 0 correspond au 31 decembre de l'annee 1899, l'age obtenu apres calcul est done de 
108 ans (en supposant que l'application ait ete execute en 2007). 



Remarque 

Si aucune valeur n'est passee en parametre du constructeur comme suit : 

unGarcomPersonne = new PersonneO; 

le lecteur Flash detecte une erreur du type : Non-correspondance du nombre d' arguments sur 
Personne$init( ). Le constructeur PersonneO ne peut etre appele sans aucune valeur passee en 
parametre. 



0 Modifier les proprietes de l'occurrence unGarcon : 

unGarcon. nom = "C"; 
unGarcon. prenom = "Nicolas"; 

Les chaines de caracteres "Nicolas" et "C." sont directement enregistrees dans les 
proprietes nom et prenom de l'occurrence unGarcon grace au signe d' affectation. 

© Utiliser les methodes de la classe Date : 

unGarcon.dateNaissance.setDate(lO) ; 
unGarcon. dateNaissance. set Full Year (1996) ; 
unGarcon. dateNaissance. setMonth(6) ; 

La propriete dateNaissance est de type Date. Pour modifier le jour, le mois et l'annee de 
naissance, il convient d'appliquer les methodes setDate( ), setMonth( ) et set Full Yea r( ) a 
la propriete dateNaissance. 

0 Utiliser les methodes de la classe Personne : 

trace(unGarcon.sePresente( ) ) ; 
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La methode sePresente( ) appliquee a l'objet unGarcon retourne en resultat une chaine de 
caracteres qui contient les valeurs enregistrees dans les proprietes de l'occurrence, soit : 

Je m'appelle Nicolas C. 
J'ai 1 ans 



Observons que le constructeur PersonneO modifie le contenu des trois variables 
d'instance nom, prenom et dateNai ssance de l'objet uneFille. Cette transformation est visi- 
ble en dehors de l'objet lui-meme, puisque la methode sePresenteO affiche a l'ecran le 
resultat de cette modification (voir figure 8-11). 



Figure 8-11 
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Memento 

La classe Date est une classe predefinie du langage ActionScript, qui facilite la manipula- 
tion des dates dans une application. Les instructions : 

var anniv:Date = new Date(1996, 3, 16); 
var annee: Number = anniv. getFul lYeart ) ; 
anniv. setFullYear(1993) ; 

ont pour resultat de creer un objet anniv dont la valeur correspond a la date du 
« 16 avril 1993 ». La methode getFullYearO appliquee a l'objet anniv permet d'enregis- 
trer la valeur de l'annee contenue dans l'objet anniv, dans la variable annee. La methode 
setFul lYear( ) modifie l'annee enregistree dans l'objet anniv. 

L etude des objets de type Date montre qu'une classe est une association de donnees 
(information ou valeur de tout type) et de methodes (outils d'acces et de transformation 
des donnees). 

Le langage ActionScript offre la possibilite au programmeur de developper ses propres 
classes en utilisant la structure syntaxique suivante : 

package { 
public class Memento { 

//Definition des proprietes 
public resume:String; 
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//Definition des methodes et du constructeur 
public function Memento( ) :void { 
//Instructions 

} 

public quel Resume( ) :String { 

//Instructions 

} 

} //Fin de la classe Memento 
} //Fin du package 

La classe Memento est enregistree dans un fichier obligatoirement nomme Memento. as. 

Un objet de type Memento est utilise dans une application (fichier d'extension . f 1 a) en le 
declarant comme suit : 

var nouveau:Memento = new MementoO; 

La variable nouveau est appelee un objet. Lacces aux proprietes ainsi qu'aux methodes de 
la classe se fait par 1' intermediate de l'operateur point (.), comme le montre l'exemple 
suivant : 

nouveau. resume = "Chapitre8 : Les classes et les objets"; 
trace (nouveau. quel Resume ( ) ) ; 



Exercices 

Utiliser les objets de la classe Date 
Exercice 8.1 

Extension web 

Pour vous faciliter la tache, le fichier Exercice8J.fl a, a partir duquel nous allons trava iller, se trouve 
dans le repertoire Exercices/SupportPourRealiserLesExercices/Chapitre8. Dans ce meme 
repertoire, vous pouvez acceder a I'application telle que nous souhaitons la voir fonctionner 
(Exercice8_l.swf) une fo is realisee. 



Ecrivez un programme qui affiche le jour de votre date de naissance. 

1. Le jour, le mois et l'annee de votre date de naissance sont saisis a l'aide de 3 zones de 
texte de saisie (voir code source). 

2. Apres saisie, construisez un objet anniversaire de type Date, dont les valeurs corres- 
pondent a votre date de naissance. 

3. Recherchez, dans la classe Date, la methode qui permet de recuperer le jour de la 
semaine correspondant a votre date de naissance. 

4. Affichez le jour de votre date de naissance en clair (lundi, mardi. . .) dans une zone de 
texte dynamique. 



Remarque 

Lorsque I'utilisateur saisit le mois de naissance, il ne saitpas qu'ActionScript numerate les mois de 0 a 11. 
Vous devez faire en sorte que le mois saisi corresponde au bon mois pour ActionScript. 
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Creer une classe d'objets 
Exercice 8.2 

L'objectif est de definir une representation d'un objet Livre. 

1. Sachant qu'un livre est defini a partir de son titre, du nom et du prenom de l'auteur, 
d'une categorie (Policier, Roman, Junior, Philosophie, Science-fiction...), d'un 
numero ISBN et d'un code d'enregistrement alphanumerique unique (voir exer- 
cice 8.3 ci-apres), definissez les donnees de la classe Livre. 

2. Ecrivez une application Bibliotheque qui cree un objet livrePoche de type Livre dont 
les references sont les suivantes : 

- Titre : L' arrangement ; 

- Categorie : Roman ; 

- Numero ISBN : 2234023858 ; 

- Nom de 1' auteur : Kazan ; 

- Prenom de l'auteur : Elia ; 

Consulter les variables d'instance 
Exercice 8.3 

Definition des comportements d'un objet de type Livre : 

1. Dans la classe Livre, decrivez la methode afficherUnLi vre( ) qui affiche les caracteris- 
tiques du livre concerne. 

2. Modifiez l'application Bibl iotheque de facon a afficher les caracteristiques de l'objet 
1 ivrePoche. 

3. Le code d'enregistrement d'un livre est construit a partir des deux premieres lettres 
des champs : nom et prenom de l'auteur, de la categorie du livre ainsi que des deux 
derniers chiffres du code ISBN. Ecrivez la methode calculerLeCodeO qui permet de 
calculer ce code. 



Remarque 

Vous pouvez utiliser la methode substringO de la classe String pourextraire une sous-chame d'un 
mot. 



4. Modifiez l'application Bibliotheque de facon a calculer et afficher le code de l'objet 
1 ivrePoche. 

Analyser les resultats d'une application objet 
Exercice 8.4 

Pour bien comprendre ce que realise l'application FaireDesTri angles, observez les deux 
programmes suivants : 

• Le fichier Triangle. as 

package { 
public class Triangle { 
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public var x:Array = new ArrayO); 

public var y:Array = new ArrayO); 

public var couleur:String; 

public function Triangle(nxa:Number, nya:Number, nxb:Number, nyb:Number, 



couleur = nc; 

x[0] = nxa; 

y[0] = nya; 

x[l] = nxb 

y[l] = nyb; 

x[2] = nxc; 

y[2] = nyc; 



public function affi chert ): void { 
for (var i :Number=0; i < x. length; i++){ 

trace("x[" + i + "] = \t" + x[i] + " \ty[" + i + "] = "+y[i]); 

} 



} 

public function deplacer(nx:Number, ny:Number) :void{ 
for (var i:Number=0; i < x. length; i++){ 
x[i ] = x[i ]+nx; 
y[i] = y[i]+ny; 

} 

} 

} //Fin de la classe Triangle 



• Le fichier CreerUnTriangle.fi a 

var unTriangle:Triangle =new TriangletO, 0,100, 0,50, 100, "OxFFOOFF"); 
unTriangl e. affi cher ( ) ; 
unTriangle.deplacerdOO, 0); 
unTriangl e. affi cher ( ) ; 

1. Quel est le programme qui correspond a 1' application ? 

2. Quel est le programme definissant le type Tri angl e ? 

3. Recherchez les attributs de la classe Tri angl e et donnez leurs noms. 

4. Combien de methodes sont definies dans la classe Tri angl e ? Donnez leurs noms. 

5. Quels sont les objets utilises par l'application CreerUnTri angle ? Que valent les 
tableaux x et y apres execution de 1' instruction de declaration ? 

6. Sur la representation graphique de la figure 8-12, placez, pour l'objet unTri angle, les 
valeurs initiales ainsi que le nom des methodes. 

7. A l'appel de la methode deplacerO, comment les valeurs sont-elles affectees aux 
attributs des objets concernes ? Modifiez les cases concernees sur la representation 
graphique. 



nxc:Number, nyc:Number, nc:String) { 



trace( " 



"); 
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8. Quel est le resultat final de 1' application ' 



Figure 8-12 

Representation 
graphique de I 'objet 
unTriangle 




La classe Carre 
Exercice 8.5 

En vous inspirant de la classe Triangle et de l'application CreerUnTri angle precedentes : 

1. Ecrivez la classe Carre, sachant que tout rectangle est une forme geometrique 
possedant : 

- une position en x et en y ; 

- un cote ; 

- une couleur. 

2. Definissez les methodes Carre( ), afficher( ) et depl acer( ). 

3. Ecrivez l'application CreerUnCarre qui cree un rectangle unCarre en 200, 200, de cote 
egal a 150 pixels, de couleur jaune (OxFFFFOO). L'application affiche les coordonnees 
de unCarre avant et apres un deplacement de 200 sur l'axe des Y. 



Creer un menu interactif 
Exercice 8.6 

Un menu est compose d'un ensemble d'items. 
1. Ecrivez la classe Item sachant qu'un item regroupe les informations suivantes : 

- Le clip representant le fond de l'item et un champ de texte dynamique pour affi- 
cher le label. Le clip est defini dans la bibliotheque de l'application et se nomme 
ItemMenuCl p. 

- Un tableau regroupant des informations telles que le nom du label a placer sur 
l'item, ainsi que le nombre de photos a afficher pour ce label. 

- Une valeur definissant la vitesse de deplacement de l'item au moment du deroulement 
du menu. 

- Un item doit pouvoir s' afficher ou s'effacer, ecrire l'en-tete des methodes associees. 
La classe Item possede un constructeur. 
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Remarque 

Vous pourrez nommer, parexemple, les proprieties cetltem, info et vitesse, les methodes afficher( ) 
et effacerO. 

2. Un menu est constitue : 

- d'un en-tete (de type Item) ; 

- d'une liste d'items (de type Array) ; 

- d'un booleen decrivant l'etat d'affichage du menu (enroule ou deroule) ; 

-d'un constructeur et de methodes nominees aDeroulerO, aEnroulerO et 
a jouterUnItem( ). 

Dans le fichier Menu. as, ecrivez la classe Menu, dans laquelle vous definirez les proprietes 
decrites ci-dessus ainsi que l'en-tete des methodes proposees. 



Le projet mini site 

Nous allons ici reexaminer l'ensemble de la structure des donnees du mini site afin de 
definir ses principaux elements sous forme de classes. 

II s'agira principalement de definir les proprietes et les comportements generaux pour 
chacune des classes, sans entrer reellement dans le detail du code. Le codage sera realise 
dans le prochain chapitre, lorsque nous aurons approfondi nos connaissances en matiere 
de programmation objet. 



Extension web 

Vous trouverez les corriges de cette partie du projet dans le repertoire Projet/Chapitre8. 



Le mini site est compose de simples zones colorees rectangulaires, reactives au clic de 
souris. Que ce soit les rubriques de la page d'accueil, les mini rubriques ou encore les 
pages finales, chacun de ces elements sont definis par une forme rectangulaire et un titre. 

Nous examinerons tout d'abord comment definir les premieres pierres a l'edifice de l'appli- 
cation, les classes Forme et TitreTexte. Nous etudierons ensuite comment construire les 
classes Rubrique, LesMinis et Page a partir des deux classes de base. 

La classe Forme 

Une forme est une zone rectangulaire coloree. Elle contient les proprietes suivantes : 

• la largeur, la hauteur et la couleur de la zone a dessiner ; 

• un numero representant sa position dans l'ordre de creation ; 

• un nom correspondant au nom d'une rubrique associee a la forme ; 

• une valeur correspondant au nombre d' elements a afficher pour une page ; 

La classe Forme possede un constructeur, ainsi que deux methodes pour afficher le 
contenu des proprietes et dessiner la forme sur la scene. 
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Remarque 

Vous pourrez parexemple nommer les proprietes largeur, hauteur, couleur, numero, nombreElt et 
nom ; les methodes sAfficherO et seDessinner( ). La methode sAfficherO trace le contenu des 
proprietes dans la fenetre de sortie alors que la methode seDessiner( ) affiche la zone coloree sur la 
scene. 



Dans le fichier Forme. as, ecrivez la classe Forme, dans laquelle vous declarerez les proprietes 
decrites ci-avant ainsi que l'en-tete des methodes proposees. 

La classe TitreTexte 

Un titre est defini a partir de son format et du texte qui le compose. II contient les proprietes 
suivantes : 

• coul eur, 1 argeur de la zone de texte, tai 1 1 e de la police ; 

• nom de la pol i ce et le contenu textuel ; 

• format de type TextFormat. 

Pour connaitre le contenu d'un titre, il est interessant de definir egalement la methode 
sAfficherO qui trace le contenu des proprietes dans la fenetre de sortie. La classe 
TitreTexte propose egalement deux methodes dessinerVertical ( ) et dessinerHorizontal ( ) 
pour afficher le nom des rubriques verticalement ou horizontalement, a partir d'un point 
passe en parametre. 

Dans le fichier TitreTexte. as, ecrivez la classe TitreTexte, dans laquelle vous definirez 
les proprietes decrites ci-avant ainsi que l'en-tete des methodes proposees. 

La classe Rubrique 

Une rubrique est composee d'une forme et d'un titre. Elle connait egalement le nombre 
de vignettes qui lui sont associees. Elle contient les proprietes suivantes : 

• forme de type Forme ; 

• titre de type TitreTexte ; 

• 1 argeurRubrique et hauteurRubrique de type uint. 

La classe Rubrique possede un constructeur qui met a jour ses proprietes et definit la position 
d'affichage de la rubrique a creer. 

Dans le fichier Rubrique. as, ecrivez la classe Rubrique, dans laquelle vous definirez les 
proprietes decrites ci-avant ainsi que l'en-tete du constructeur. 

La classe LesMinls 

Les minis-rubriques sont constitutes de la liste des rubriques (forme et nom) du site. 
La classe LesMinis presente les proprietes suivantes : 

• un tableau contenant la liste de toutes les zones de couleur (Forme) ; 

• un tableau contenant la liste de tous les noms des rubriques (TitreTexte) ; 

• la faille d'une mini rubrique : largeurMini et hauteurMini de type uint. 
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Dans le fichier Mini .as, ecrivez la classe Mini, dans laquelle vous definirez les proprietes 
decrites ci-avant ainsi que l'en-tete du constructeur. 

La classe Page 

Une page est composee d'une forme et d'un titre. Elle connait egalement le nombre de 
vignettes qui lui sont associees. Elle contient les proprietes suivantes : 

• forme de type Forme ; 

• titre de type TitreTexte ; 

• 1 argeurPage et hauteurPage detypeuint. 

Dans le fichier Page. as, ecrivez la classe Page, dans laquelle vous definirez les proprietes 
decrites ci-dessus ainsi que l'en-tete du constructeur. 

L'application ProjetChapitre8 

L' application ProjetChapitre8.fl a cree les rubriques et les pages, sans les afficher sur la 
scene. Elle utilise les constructeurs des classes Rubrique et Page. 

L'afnchage du contenu des proprietes des objets crees s'effectue par 1' intermediate des 
methodes sAfficherO des deux classes Forme et TitreTexte. Les valeurs s'affichent dans 
la fenetre de sortie. 
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Au cours du chapitre precedent, nous avons examine comment mettre en place des objets 
a l'interieur d'un script. Cette etude a montre combien la structure generate des programmes 
se trouvait modifiee par l'emploi des objets. 

En realite, les objets sont beaucoup plus qu'une structure syntaxique. lis sont regis par 
des principes essentiels qui constituent les fondements de la programmation objet. Dans 
ce chapitre, nous etudierons l'ensemble de ces principes. 

Nous examinerons ainsi les differentes fagons de definir une propriete au sein d'une 
classe et d'une application (voir la section « Le traitement des proprietes d'une classe »). 

Nous expliquerons ensuite (section « Les objets controlent leur fonctionnement ») le 
concept d' encapsulation des donnees et nous examinerons pourquoi et comment les 
objets protegent leurs donnees. 

Puis, nous definirons la notion d'heritage entre classes (section « L'heritage »). Nous 
observerons combien cette notion est utile puisqu'elle permet de reutiliser des program- 
mes tout en apportant des variations dans le comportement des objets heritants. 

Pour finir, nous realiserons une application qui met en oeuvre, de fagon plus concrete, 
toutes les notions abordees au cours de ces deux derniers chapitres et qui utilise des clips 
d' animation et des gestionnaires d'evenements. 

Le traitement des proprietes d'une classe 

Les proprietes d'une classe dessinent la structure de base des objets utilises par une 
application. Dans cette section nous allons examiner les differentes fagons de definir et 
de manipuler les donnees d'une classe. 
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Les donnees statiques 

En definissant un type ou une classe, le developpeur cree un modele qui decrit les fonc- 
tionnalites des objets utilises par le programme. Les objets sont crees en memoire a partir 
de ce modele, par copie des donnees et des methodes. 

Cette copie est realisee lors de la reservation des emplacements memoire grace a l'opera- 
teur new qui initialise les donnees de l'objet et fournit, en retour, l'adresse oil se trouvent 
les informations stockees. 

En realite, nous allons voir que la programmation objet implique differentes facons de 
reserver un espace memoire. Pour cela, nous allons examiner la difference de comportement 
entre une variable d' instance et une donnee statique. 

II existe deux facons de declarer les proprietes d'une classe. 

• La premiere consiste a declarer une propriete comme nous l'avons fait jusqu'a present. 

public cl assPersonne { 
public var nomiString; 

//... 

} 

Dans ce cas, la propriete est appelee « variable d'instance ». Dans notre exemple, la 
propriete nom est une variable d'instance de la classe Personne. 

• La seconde consiste a declarer une variable en mode statique, comme suit : 

public class Personne { 
public static var nbPersonne:Number; 

//... 

} 

Le mot-cle static place en amont de la declaration de la variable indique au lecteur 
Flash que la variable ainsi declaree est une variable statique. Dans cette situation, le 
lecteur Flash reserve un unique espace memoire pour y stacker la valeur associee. 
Cet espace memoire est communement accessible pour tous les objets du meme 
type. 



Remarque 

Lorsque le mot-cle static n'apparait pas, Pinterpreteur reserve, a chaque appel de Poperateur new, un 
espace memoire pour y charger les donnees decrites dans la classe. II existe autant d'espaces memoire 
associes que d'objets crees. 



Les donnees statiques sont appelees « variables de classe ». Dans notre exemple, la 
propriete nbPersonne est une variable de classe de la classe Personne. 

Exemple : compter des personnes 

Pour bien comprendre la difference entre une donnee static et une donnee non static, 
modifions la classe Personne, afin de pouvoir connaitre le nombre d'objets de type 
Personne crees en cours d' application. 

Pour ce faire, l'idee est d'inserer dans la fonction constructeur une instruction qui permet 
d'incrementer un compteur de personnes. 
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La variable representant ce compteur doit etre independante des objets crees, de sorte que 
sa valeur ne soit pas reinitialisee a zero a chaque creation d'objet. Cette variable doit 
cependant etre accessible pour chaque objet de facon qu'elle puisse s'incrementer de 1 a 
chaque fois qu'un objet est construit. 

Pour realiser ces contraintes, le compteur de personnes doit etre une variable de classe, 
c'est-a-dire une variable declaree avec le mot-cle static. Examinons tout cela dans le 
programme suivant. 

//Definition de la classe Personne 
public cl assPersonne { 

//Definition des attributs de la classe 

public var prenom:String; 

public var nom:String; 

public var dateNaissance:Date; 

public static var compteur: Number= 0; 

//Definition de la fonction constructeur 

public function Personnet p:String, n:String, j:Number, 



//et toutes les autres methodes de la classe Personne definies 
//au chapitre precedent 
} //Fin de la classe Personne 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesPersonnes.fi a, sous le repertoire 
Exempl es/Chapi tre9/Stati c. 



Les donnees definies dans la classe Personne sont de deux types : 

• les variables d'instance : nom, prenom et dateNaissance ; 

• la variable de classe : compteur. 

Seul le mot-cle stati c permet de differencier leur categorie. 

Grace au mot-cle static, la variable de classe compteur devient un espace memoire 
commun, accessible par tous les objets crees. Pour utiliser cette variable, il suffit de 
l'appeler par son nom veritable, c'est-a-dire compteur, si elle est utilisee dans la classe 
Personne ; ou Personne. compteur, si elle Test en dehors de cette classe. 

Execution de I'application CompterDesPersonnes 

Pour mieux saisir la difference entre les variables d'instance (non static) et les variables 
de classe (static), observons comment fonctionne I'application CompterDesPersonnes. 

var uneFille:Personne = new PersonneCElena" , "T.", 16, 3, 1993); 
trace( "Personne creee : " + Personne. compteur) ; 
trace(uneFi 1 1 e. sePresente( ) ) ; 



miNumber, a:Number) { 



prenom = p; 



nom = n 



dateNaissance 
compteur++; 



new Dateta, m, j); 
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var unGarcon : Personne = new Personne("Nicolas","C", 10, 6, 1996); 
trace( "Personne creee : " + Personne. compteur) ; 
trace(unGarcon.sePresente( ) ) ; 

Dans ce programme, deux objets de type Personne sont crees a partir du modele derini par la 
classe Personne. Chaque objet est un representant particulier, une instance de la classe 
Personne, avec un nom, un prenom et une date de naissance specirique pour chaque objet cree. 

Lorsque l'objet uneFille est cree en memoire, grace a l'operateur new, les donnees nom, 
prenom et dateNai ssance sont creees. La variable de classe compteur est elle aussi creee en 
memoire et sa valeur est initialisee a 0. 

A l'appel du constructeur, les valeurs des variables nom, prenom et dateNai ssance de 
l'instance uneFi 1 1 e sont initialisees a l'aide des valeurs passees en parametres du construc- 
teur. La variable de classe compteur est incrementee de 1 (compteur++). Le nombre de 
personnes est alors de 1 (voir l'objet UneFi 1 1 e, decrit a la figure 9-1). 

De la meme facon, l'objet unGarcon est cree en memoire grace a l'operateur new. Les 
donnees nom, prenom et dateNai ssance sont, elles aussi, initialisees a l'aide des valeurs 
passees en parametres du constructeur. 

Pour la variable de classe compteur, en revanche, cette initialisation n'est pas realisee. La 
presence du mot-cle static fait que la variable de classe compteur, qui existe deja en 
memoire, ne peut etre reinitialisee directement par l'interpreteur. 

II y a done, non pas reservation d'un nouvel emplacement memoire, mais preservation du 
meme emplacement memoire, avec conservation de la valeur calculee a l'etape prece- 
dente, soit 1. 
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Figure 9-1 

La variable de classe Personne. compteur est creee en memoire, avec l'objet uneFille. 

Apres initialisation des donnees nom, prenom et dateNai ssance de l'instance unGarcon, l'instruc- 
tion compteur++ fait passer la valeur de Personne. compteur a 2 (voir l'objet unGarcon decrit 
a la figure 9-1). 
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N'existant qu'en un seul exemplaire, la variable de classe compteur permet de compter le 
nombre de personnes creees par 1' application. L' incrementation de cette valeur est realisee 
independamment de 1' objet, la variable etant commune a tous les objets crees. 



Remarque 

Les variables statiques sont surtout utilisees pour definir des constantes communes et accessibles par un 
ensemble de classes. Nous nous servirons de cette technique de programmation pour realiser le mini site 
a la fin de ce chapitre. 



Les classes dynamiques 

Lorsque vous creez votre propre classe, les donnees et methodes sont definitivement 
definies dans le fichier d'extension .as. Par defaut, il n'est pas possible d'ajouter une 
nouvelle propriete ou une nouvelle methode par programme. 

Ainsi, l'ajout direct de la propriete telephone a l'objet uneFille de type Personne, depuis 
l'application creerllnePersonne : 

var uneFille:Personne = new PersonneC'Elena", "T.", 16, 3, 1993); 
uneFille. telephone = "01 22 16 10 01"; 
trace(uneFi 1 1 e.sePresente( ) ) ; 

traceCMon numero de telephone : " + uneFille. telephone); 

a pour consequence de generer une erreur au moment de la compilation. Cette erreur 
indique qu'il n'existe pas de propriete nommee telephone. 

L'ajout d'une propriete ou d'une methode par programme n'est realisable qu'avec des 
classes dynamiques. Pour rendre une classe dynamique, il suffit de placer le mot-cle 
dynami c devant le mot-cle cl ass lors de la definition de la classe. 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesPersonnes.fi a, sous le repertoire 
Exempl es/Chapi tre9/ Dynamic. 



Par exemple, pour rendre dynamique la classe Personne, il suffit d'ecrire dans le fichier 
Personne. as : 

public dynamic class Personne { 
//Definition des attributs de la classe 
//Definition des methodes 

> 

L'ajout simple du modificateur dynamic suffit a rendre executable l'instruction 
uneFille. telephone = "01 22 16 10 01". La fenetre de sortie affiche alors le resultat suivant : 

Je m'appelle Elena T. 
J'ai 12 ans 

Mon numero de telephone : 01 22 16 10 01 

Je m'appelle Nicolas C. 
J'ai 9 ans 
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De cette facon, la propriete telephone est ajoutee a la classe Personne et toute personne 
peut desormais avoir un numero de telephone. 

La classe MovieClip 

Bien que cela semble plus logique et plus coherent de definir une propriete ou une 
methode directement dans le fichier de definition de la classe, les classes dynamiques 
sont parfois tres pratiques. 

L'exemple le plus courant concerne la classe MovieClip. En effet, cette derniere est une 
classe dynamique. Elle autorise l'ajout de proprietes et de methodes par programme. 

Au cours des exemples et des exercices precedents (voir par exemple les exercices 6. 1 et 
6.6 du chapitre 6, « Collectionner des objets »), nous avons utilise plusieurs fois la 
faculte d'ajout de proprietes par programme. 

Par exemple, pour le jeu de bulles, lorsque nous definissons les proprietes val eurBul 1 e et 
vitesse pour chaque bulle creee : 

for (var i:Number; i < = 10; 1++) { 
listeBulleCi] = new BulleClpO; 
listeBulle[i]. vitesse = Math.random()*5+10; 
listeBulle[i].valeur = Math.roundt Math. random( )*5) ; 
addChild(listeBulle[i]) ; 

} 

nous ne faisons qu'ajouter deux nouvelles proprietes au clip Bulled p. De cette facon, 
chaque bulle creee possede sa propre vitesse de deplacement sur la scene et sa propre 
valeur de gain lorsque le curseur l'atteint. 

L'ajout de nouvelles proprietes a un objet de type MovieCl ip permet done la definition, a 
moindre cout de developpement : 

• de valeurs specifiques a un clip d' animation ; 

• de comportements propres a chaque clip present sur la scene (vitesse de deplacement, 
donnee a afficher lors d'un clic. . .). 

Les objets controlent leur fonctionnement 

L'un des objectifs de la programmation objet est de simuler, a l'aide d'un programme 
informatique, la manipulation des objets reels par l'etre humain. Les objets reels forment 
un tout et leur manipulation necessite la plupart du temps un outil ou une interface de 
communication. 

Par exemple, quand nous prenons un ascenseur, nous appuyons sur le bouton d'appel 
pour ouvrir les portes ou pour nous rendre jusqu'a l'etage desire. L' interface de commu- 
nication est ici le bouton d'appel. Nul n'aurait l'idee de prendre la telecommande de sa 
television pour appeler un ascenseur. 

De la meme facon, la preparation d'une omelette necessite de casser des oeufs. Pour 
briser la coquille d'un ceuf, nous pouvons utiliser 1' outil couteau. Un marteau pourrait 
egalement etre utilise mais son usage n'est pas vraiment adapte a la situation. 

Comme nous le constatons a travers ces exemples, les objets reels sont manipules par 
1' intermediate d'interfaces appropriees. L'utilisation d'un outil inadapte fait que l'objet 
ne repond pas a nos attentes ou qu'il se brise definitivement. 



Les principes du concept << objet » 

Chapitre 9 



Tout comme nous manions les objets reels, les applications informatiques utilisent des 
objets virtuels definis par le programmeur. Cette manipulation necessite des outils aussi 
bien adaptes que nos outils reels. Sans controle sur le bien-fonde d'une manipulation, 
1' application risque de fournir de mauvais resultats, ou pire, de cesser brutalement son 
execution. 



La notion d'encapsulation 

Pour realiser l'adequation entre un outil et la manipulation d'un objet, la programmation 
objet utilise le concept d'encapsulation. 

Remarque 

Parce terme, il faut entendre que les donnees d'un objet sont protegees, tout comme le medicament est 
protege par la fine pellicule de sa capsule. Grace a cette protection, il ne peut y avoir de transformation 
involontaire des donnees de I'objet. 



L' encapsulation passe par le controle des donnees et des comportements de I'objet. Ce 
controle est etabli a travers la protection des donnees (voir section suivante) et l'acces 
controle aux donnees (voir section « Les methodes d'acces aux donnees »). 

La protection des donnees 

Le langage ActionScript fournit les niveaux de protection suivants pour les membres 
d'une classe (donnees et methodes) : 

• Protection public. Les membres (donnees et methodes) d'une classe declares public 
sont accessibles par tous les objets de l'application. Les donnees peuvent etre modifiees 
par une methode de la classe, d'une autre classe ou depuis le script principal. 

• Protection pri vate. Les membres de la classe declares private ne sont accessibles que 
par les methodes de la meme classe. Les donnees ne peuvent etre initialisers ou modi- 
flees que par 1' intermediate d'une methode de la classe. Les donnees ou methodes ne 
peuvent etre appelees par un autre script. 

Par defaut, lorsque les donnees sont declarees sans type de protection, leur protection est 
publ i c. Elles sont alors accessibles depuis toute l'application. 

Protegerles donnees de la classe Personne 

Pour proteger les donnees de la classe Personne, il suffit de remplacer le mot-cle public 
precedant la declaration des variables d'instance par le mot private. Observons la 
nouvelle classe Personne dont les donnees sont ainsi protegees. 

package { 
//Definition de la classe Personne 
public classPersonne { 

//Definition des attributs de la classe 

privite var prenom: String; 

private var nom:String; 

private var dateNaissance:Date; 



346 



Apprendre a programmer en ActionScript 3 



//Definition de la fonction constructeur 

public function Personne ( p:String, n:String, j:Number, m:Number, a:Number) { 
prenom = p; 
nom = n 

dateNai ssance = new Date(a, m, j); 

} 

//Definition du comportement sePresenteO 
public function sePresente( ) :String { 
var age:Number = getAgeO 

return "Je m'appelle " + prenom + " " + nom + "\nJ'ai " + age + " ans "; 

} 

//Definition de la methode calculant l'age de la personne 
public function getAge( ): Number ( 
var aujourdHui :Date = new DateO; 

var age:Number = aujourdHui .getFullYearO - dateNaissance.getFul 1 Year( ) ; 
return age; 

} 

} 

} 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesPersonnesPrivees.fi a, sous le 
repertoire Exempl es/Chapitre9/DonneesPri vees. 



Les donnees nom, prenom et dateNai ssance de la classe Personne sont protegees grace au 
mot-cle private. Etudions les consequences d'une telle protection sur la phase de compi- 
lation de l'application CreerDesPersonnesPrivees. 

var unGarcon : Personne = new Personnel"", "", 0, 0, 0); 

trace(unGarcon.sePresente( ) ) ; 

unGarcon. nom = "C. " ; 

unGarcon. prenom = "Nicolas"; 

unGarcon. dateNai ssance. set Date (10) ; 

unGa rcon. dateNai ssance. set Ful 1 Year (1996) ; 

unGarcon.dateNaissance.setMonth(6) ; 

t race (unGa rcon. sePresentet ) ) ; 

Compilation de l'application CreerDesPersonnesPrivees 

Les donnees nom, prenom et dateNai ssance de la classe Personne sont declarees privees. Par 
definition, elles ne sont done pas accessibles en dehors de la classe oil elles sont definies. 

Or, en ecrivant dans le script principal l'instruction unGarcon .nom = "C . " ; le programmeur 
demande d'acceder, depuis le script CreerDesPersonnesPrivees, a la valeur de nom, de 
facon a la modifier. Cet acces est impossible, car nom est defini en mode private dans la 
classe Personne. C'est pourquoi le compilateur indique une erreur du type : « Impossible 
de creer la propriety nom sur Personne. » Le compilateur indique la meme erreur pour 
les proprietes prenom et dateNai ssance qui sont egalement definies en mode prive. 
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Question 

Que se passe-t-il si Ton place le terme private devant la methode sePresente( ) ? 
Reponse 

Lors de la compilation du fichier CreerDesPersonnesPrivees, le message d'erreur « La propriete 
sePresente est introuvable sur Personne et il n'existe pas de valeur par defaut » 
s'affiche. 

En effet, si la methode sePresenteO est definie en private, elle n'est plus accessible depuis 
I'exterieur de la classe Personne. II n'est done pas possible de Pappeler depuis le script principal 
CreerDesPersonnesPri vees. 



Les methodes d'acces aux donnees 

Lorsque les donnees sont totalement protegees, e'est-a-dire declarees private a l'inte- 
rieur d'une classe, elles ne sont plus accessibles depuis une autre classe ou depuis le 
script principal. Pour connaitre ou modifier la valeur d'une donnee, il est necessaire de 
creer, a l'interieur de la classe, des methodes d'acces a ces donnees. 

Les donnees privees ne peuvent etre consultees ou modifiees que par des methodes de la 
classe ou elles sont declarees. 

Ainsi, grace a l'acces aux donnees par 1' intermediate de methodes appropriees, l'objet 
permet, non seulement la consultation de la valeur de ses donnees, mais aussi l'autorisation 
ou non, suivant ses propres criteres, de leur modification. 



Figure 9-2 

Lorsque les donnees 
d'un objet sont pro- 
tegees, Vobjetverifie 
lui-meme la validite 
des donnees. 



Acces en 
consultation 



Classe 



Methodes. 



Acces en 
modification 




Les methodes get et set 

Comme le montre la figure 9-2, il existe deux types de methodes, celles dont l'acces est : 

• En consultation. La methode fournit la valeur de la donnee mais ne peut la modifier. 
Ce type de methode est aussi appele « accesseur » en consultation. Ces methodes ont 
par convention un nom qui commence par le terme get. 

• En modification. La methode modifie la valeur de la donnee. Cette modification est 
realisee apres validation par la methode. On parle aussi « d' accesseur en modification ». 
Ces methodes ont par convention un nom qui commence par le terme set. 
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Dans notre exemple, il est possible de creer autant de methodes d'acces en consultation 
et en modification qu'il existe de proprietes. Ainsi, nous obtenons les methodes suivantes : 

//© Methode d'acces en lecture (get) 
//Recuperer le prenom 
public function getPrenom( ) :String { 
return prenom; 

} 

//Recuperer le nom 
public function getNom():String { 
return nom; 

} 

//Recuperer la date de naissance 

public function getDateNaissance():String { 

return dateNaissance.getDate( ) + "/" + dateNaissance.getMonth( ) 

+ "/" + dateNaissance.getFul 1 Year( ) ; 

} 

//© Methode d'acces en ecriture (set) 
//Modifier le prenom 

public function setPrenom(p:String) :void ( 
prenom = p; 

} 

//Modifier le nom 
public function setNom(n:String):void { 
nom = n; 

} 

//© Modifier la date de naissance 

public function setDateNaissance(dn:String) :void ( 

var tmp:Array = new ArrayO; 

tmp = dn . spl it( "/" ,3) ; 

dateNai ssance = new Date(tmp[2], tmp[l], tmp[0]); 

} 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesPersonnes.fi a, sous le repertoire 
Exempl es/Chapi tre9/MethodesGetEtSet. 



© Les methodes d'acces en lecture (methode get) retournent en resultat la valeur stockee 
dans la propriete appropriee. Ainsi, par exemple, la valeur stockee dans la propriete 
prenom est transmise, grace au return, au programme qui fait appel a la methode 
getPrenomO. La methode getDateNai ssance( ) retourne la date de naissance d'une 
personne sous la forme d'une chaine de caracteres ou le jour, le mois et l'annee sont 
presentes sous la forme jj/mm/aaaa. 

© Les methodes d'acces en ecriture (methode set) sont utilisees pour modifier les 
valeurs deja enregistrees dans les proprietes de l'objet. Les nouvelles valeurs sont 
passees en parametres de la methode. 

© La methode setDateNaissance( ) prend en parametre une chaine de caracteres de la 
forme jj/mm/aaaa. Les valeurs numeriques associees au jour, au mois et a l'annee 
sont extraites de la chaine grace a la methode spl it( ) qui est une methode native de 
la classe String. 



Les principes du concept « objet » J 

L' instruction dn.spl it('7", 3) recherche, dans la chaine dn, tous les caracteres identi- 
ques au caractere / qu'elle considere comme element separateur de sous-chaines. 
Elle extrait les 3 sous-chaines placees entre les separateurs et les retourne sous forme 
d'un tableau. Les trois valeurs ainsi determinees sont utilisees pour construire la 
propriete dateNaissance. 

Ainsi, 1' application : 

//© Creation de 1 'objet unGarcon 

var unGarcon : Personne = new PersonneC", "", 0, 0, 0); 
trace(unGarcon.sePresente( )) ; 

//© Initialisation des proprietes de 1 'objet unGarcon 

unGarcon .setNom( "C. " ) ; 

unGarcon .set Prenomt "Ni col as" ) ; 

unGarcon .set DateNai ssance( "10/06/1996" ) ; 

//© Consultation des proprietes de 1 'objet unGarcon 

traceC'Je m'appelle "+ unGarcon. getPrenomt ) + " " + unGarcon .getNomt )) ; 

traceC'J'ai " + unGarcon. getAgeO + " ans"); 

permet de modifier et d'afhcher les nouvelles proprietes de l'objet unGarcon sans que cela 
ne genere d'erreurs d'acces aux membres de la classe Personne. 

O L' occurrence unGarcon est creee grace au constructeur de la classe Personne. Aucune 
valeur n'est passee en parametre du constructeur. Les proprietes de l'objet unGarcon 
sont par defaut initialisers a 0 et undefined. Laffichage provoque par l'appel de la 
methode sePresente( ) appliquee a l'objet unGarcon est alors le suivant : 

Je m' appel 1 e 
J'ai 108 ans 

© Les chaines de caracteres Nicolas et C. sont enregistrees dans les proprietes nom 
et prenom de l'occurrence unGarcon par l'intermediaire des methodes setPrenomO et 
setNom( ). La date de naissance est definie a l'aide de la methode setDateNaissancet ). 

© Le contenu des proprietes de l'occurrence unGarcon est obtenu par l'intermediaire des 
methodes getPrenomO et getNomO. La commande traceO affiche : 

Je m'appelle Nicolas C. 
J'ai 11 ans 

Le controle des donnees 

Les methodes d'acces en modification utilisent des mecanismes de controle pour assurer 
la validite des valeurs transmises en parametres de la methode. 

Ainsi, dans l'exemple suivant, nous prenons pour hypothese que l'annee de naissance 
d'une personne ne peut jamais etre superieure a l'annee en cours. Cette condition doit 
etre verifiee pour toutes les methodes qui peuvent modifier la date de naissance d'une 
personne. 
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Comme nous l'avons deja observe au cours de ce chapitre, les methodes sePresente( ) et 
getAget ) ne font que consulter le contenu de la propriete dateNai ssance. 

En revanche, les methodes de type set...() et le constructeur PersonneO modifient le 
contenu des proprietes de la classe. Les methodes setNomO et setPrenomO n'ont pas 
d'influence sur la donnee dateNai ssance. En revanche, les methodes setDateNaissanceO et 
Personne( ) doivent verifier la validite de la date de naissance, de sorte que cette derniere 
ne puisse etre definie apres l'annee en cours. Examinons la classe Personne suivante qui 
prend en compte ces nouvelles contraintes : 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesPersonnesControlees.fi a, sous le 
repertoire Exempl es/Chapitre9/Control eDesDonnees. 



package { 
//Definition de la classe Personne 
public class Personne { 

//Definition des attributs de la classe 

private var prenom:String; 

private var nom:String; 

private var dateNaissance:Date; 

//O Methode verifiant la validite de la date de naissance 
public function val ideDateNai ssance ():Boolean { 

var aujourdHui : Date = new DateO; 

var cetteAnnee: Number = aujourdHui .getFul 1 Year( ) ; 

var anneeNaissance:Number = dateNai ssance. getFul lYear( ) ; 

if (cetteAnnee < anneeNaissance) return false; 

else return true; 

} 

public function setDateNai ssance(dn :String) :void { 
var tmp:Array = new ArrayO; 
tmp = dn.spl it( "/" ,3) ; 

dateNai ssance = new Date(tmp[2] , tmp[l], tmp[0]); 

//© Verifier si la date de naissance est valide 
if ( ! val ideDateNaissance( ) ) { 
dateNaissance = new DateO; 

} 

} 

//Definition du comportement sePresenteO 
//Definition de la methode calculant 1'age de la personne 
} //Fin de la classe PersonneControl e 

} 

O La methode val ideDateNai ssance( ) controle la date de naissance stockee dans la pro- 
priete dateNaissance. Si l'annee correspondant a cette date est superieure a l'annee en 
cours, cela signifie que la date fournie en parametre du constructeur est erronee, la 
methode valideDateNaissanceO retourne la valeur false. La methode retourne true 
dans tous les autres cas. 

© La methode setDateNaissanceO fait appel a la methode valideDateNaissanceO 
apres avoir enregistre les donnees dans la propriete dateNaissance. Le test if 
(! valideDateNaissanceO) utilise la negation grace a l'operateur« ! ». II se traduit 
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litteralement par « Si la date de naissance n'est pas valide alors enregistrer comme 
date de naissance, la date du jour oil 1' application est executee ». 

La fonction constructeur 

Le constructeur d'une classe modifie egalement les proprietes de la classe puisqu'il est 
appele au moment de la construction de l'objet. Les valeurs passees en parametres de la 
fonction constructeur sont utilisees pour initialiser les proprietes de l'objet en cours de 
construction. 

Par souci de coherence et afin de faciliter la maintenance du code, il est fortement 
conseille d'initialiser les proprietes a l'interieur du constructeur a l'aide des methodes 
set...( ). De cette facon, si la mise a jour d'une propriete demande un nouveau controle et 
done l'ajout de nouvelles instructions, la modification du code ne s'effectuera que pour la 
methode set_(). 

En utilisant cette technique de programmation, le constructeur de la classe Personne 
s'ecrit desormais : 

//Definition de la fonction constructeur 

public function Personne( p:String, n:String, dn:String) { 

setNom(n) ; 

setPrenom(p) ; 

setDateNaissance(dn) ; 

} 

Chaque propriete est initialisee avec la methode d'acces en ecriture qui lui est propre. La 
propriete nom Test par la methode setNom( ), prenom par setPrenom( ) . . . 

La methode setDateNaissance( ) initialise la date de naissance a partir d'une chaine de 
caracteres de type jj/mm/aaaa. Modifions le constructeur de facon a ce que le parametre 
correspondant a la date de naissance soit une chaine de caracteres et non plus trois 
valeurs numeriques. 



Remarque 

Le format jj/mm/aaaa presente I'avantage d'etre usuel pour ecrire une date. L'erreur qui consistait a 
intervertir le jour avec le mois ou I'annee dans le constructeur precedent peut etre plus facilementevir.ee. 



La methode setDateNai ssance( ) verifiant par elle-meme la validite de la date, il n'est pas 
besoin d'ajouter de nouvelles instructions de controle au sein du constructeur. 

Execution de I'application CreerDesPersonnesControlees 

Pour verifier que tous les objets Personne controlent bien leur date de naissance, examinons 
1' execution de I'application suivante : 

//O Creer un objet uneFille avec le bon format de date 

var uneFille:Personne = new PersonneCElena", "T.", "16/03/1993"); 

trace(uneFi 1 le.sePresente( ) ) ; 

//© Creer un objet unGarcon avec le bon format de date 

var unGarcon:Personne = new Personne("Nicolas","C", "10/06/2200"); 

trace(unGarcon.sePresente( )) ; 
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O L' occurrence uneFille est creee grace au constructeur de la classe Personne. La date 
de naissance est valide puisque 1993 est situee avant l'annee en cours. La methode 
valideDateNaissance( ) retourne true. La propriete dateNai ssance n'est pas modifiee. 
Le script affiche : 

Je m'appelle Elena T. 
J'ai 14 ans 

© Loccurrence unGarcon est creee avec une date de naissance erronee, 2200 est situe 
apres l'annee en cours. La methode val ideDateNaissance( ) ) retourne false. La pro- 
priete dateNai ssance est done modifiee, sa valeur devient la date courante. Le script 
affiche : 

Je m'appelle Nicolas C. 
J'ai 0 ans 

Des methodes invisibles 

Comme nous l'avons observe precedemment, les donnees d'une classe sont generale- 
ment declarees en mode private. Les methodes, quant a elles, sont le plus souvent decla- 
rers publ ic, car ce sont elles qui permettent l'acces aux donnees protegees. Dans certains 
cas particuliers, il peut arriver que des methodes soient definies en mode private. Elles 
deviennent alors inaccessibles depuis les classes exterieures. 

Ainsi, le controle systematique des donnees est toujours realise par l'objet lui-meme, et 
non par 1' application qui utilise les objets. Par consequent, les methodes qui ont pour 
charge de realiser cette verification peuvent etre definies comme methodes internes a la 
classe puisqu'elles ne sont jamais appelees par l'application. 

Par exemple, le controle de la validite de la date de naissance n'est pas realise par l'appli- 
cation CreerDesPersonnesControlees, mais correspond a une operation interne a la classe 
Personne. La methode val ideDateNaissance( ) peut done etre definie en mode prive comme 
suit : 

private function val ideDateNai ssance ():Boolean { 
var aujourdHui : Date = new DateO; 
var cetteAnnee: Number = aujourdHui .getFul lYear( ) ; 
var anneeNaissance:Number = dateNaissance. getFul 1 Year( ) ; 
if (cetteAnnee < anneeNai ssance) return false; 
else return true; 

} 



Remarque 

La methode val i deDateNai ssance ( ) est appelee « methode d'implementation » ou encore « methode 
metier » car e Me est declaree en mode prive. Son existence n'est connue d'aucune autre classe. Seules 
les methodes de la classe Personne peuvent I'exploiter et elle n'est pas directement executable par 
l'application. Elle est cependant tres utile a I'interieurde la classe ou elle est definie. 
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L heritage 

L'heritage est le dernier concept fondamental de la programmation objet etudie dans ce 
chapitre. Ce concept permet la reutilisation des fonctionnalites d'une classe, tout en 
apportant certaines variations specifiques de 1' objet heritant. 

Avec l'heritage, les methodes definies pour un ensemble de donnees sont reutilisables 
pour des variantes de cet ensemble. Par exemple, si nous supposons qu'une classe 
Lecteur definit un ensemble de comportements propres aux personnes inscrites a une 
bibliotheque, alors : 

• Les comportements decrits par la classe Personne peuvent etre reutilises par la classe 
Lecteur, qui rassemble egalement des personnes. Cette reutilisation est effectuee sans 
avoir a modifier les instructions de la classe Personne. 

• II est possible d'ajouter d'autres comportements specifiques aux objets Lecteur. Ces 
nouveaux comportements sont valides uniquement pour la classe Lecteur et non pour 
la classe Personne. 

La relation « est un » 

En pratique, pour determiner si une classe B herite d'une classe A, il suffit de savoir s'il 
existe une relation « est un » entre B et A. Si tel est le cas, la syntaxe de declaration est la 
suivante : 

public classB extends A { 

//Donnees et methodes de la classe B 

I > 

Dans ce cas, on dit que : 

• B est une sous-classe de A ou encore une classe derivee de A. 

• A est une super-classe ou encore une classe de base. 

Un Lecteur « est une » Personne 

En supposant qu'un Lecteur est une Personne qui possede un numero d'abonne et qui ne 
peut emprunter que trois livres a la fois, la classe Lecteur s'ecrit de la facon suivante : 

package { 
//Definition de la classe Lecteur 
public classLecteur extends Personnel 

//Definition des attributs de la classe 

private var numAbonne:String; 

private var listeLivres:Array; 

//Methode d'acces en lecture 
public function getNumAbonneO: String ( 
return numAbonne; 

} 

public function getListeLivres():Array { 
return listeLivres; 

} 
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//Methode d'acces en ecriture 
public function setNumAbonne(n:String) :void ( 
numAbonne = n; 

} 

public function setListeLivres(ll:String, 1 2 : Stri ng , 13:String):void { 
listeLivres = new Arraydl, 12, 13); 

} 

//Definition de la fonction constructeur 

public function Lecteur( p:String. n:String, dmString, num:String, 
1 1 : Stri ng , 12:String, 1 3: Stri ng) { 

super(p, n , dn); 
setNumAbonne(num) ; 
setListeLivresdl, 12, 13); 

} 

//Definition du comportement sePresenteO 
override public function sePresente( ) :String ( 

var annonce:String = "\nNumero : " + numAbonne ; 

annonce += "\nListe des livres empruntes :"; 

fortvar i:Number = 0; i < listeLivres. length; i++) 
annonce += "\n\t"+listel_ivres[i]; 

return annonce; 

} 

} 

} 



Extension web 

Vous pourrez tester cet exemple en executant le fichier CreerDesLecteurs.fi a, sous le repertoire 
Exempl es/Chapi tre9/Heri tage. 



Un lecteur est une personne (Lecteur extends Personne) qui possede : 

• un numero d'abonne (private var numAbonne:String) ; 

• une liste de livres (private var 1 i steLi vres : Array) ; 

• des comportements propres aux personnes soit, par exemple, quand le lecteur se 
presente, il fournit son nom et son prenom et son age ; 

• des comportements propres aux lecteurs soit, par exemple, quand le lecteur se 
presente, il fournit egalement son numero d'abonne ainsi que la liste des livres qu'il a 
empruntes. 

Les methodes de la classe Personne restent done operationnelles pour les objets Lecteur. 
En examinant de plus pres les classes Lecteur et Personne, nous observons que : 

• La notion de constructeur existe aussi pour les classes derivees (voir section « Le 
constructeur d'une classe heritee »). 

• La fonction sePresente( ) existe sous deux formes differentes dans la classe Lecteur et 
la classe Personne. II s'agit la du concept de polymorphisme (voir section « Le poly- 
morphisme »). 
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Le constructeur d'une classe heritee 

Les classes derivees possedent leurs propres constructeurs, appeles par l'operateur new, 
comme dans : 

var uneLectrice: Lecteur = new LecteurC'Elena", "T.", 

"16/03/1993", "0102030405", 

"La pi ai santerie" , 

"Le mystere de la chambre jaune", 

"Peter Pan" ); 
trace(uneLectrice.sePresente( ) ) ; ) ; 

Pour construire un objet derive, il est indispensable de construire tout d'abord 1' objet 
associe a la classe mere. Pour creer un objet Lecteur, nous devons definir son nom, son 
prenom et sa date de naissance. Le constructeur de la classe Lecteur doit appeler le construc- 
teur de la classe Personne. Cet appel s'effectue par 1' intermediate de l'outil super( ). 

Grace a cet outil, le constructeur de la classe mere est appele depuis le constructeur de la 
classe, comme suit : 

public function Lecteur( p:String, n:String, dn:String, num:String, 
ll:String, 12:String, 13:String) { 

//© Appeler le constructeur de la classe Personne 

super(p, n, dn); 
//© Initialiser les donnees propres au Lecteur 

setNumAbonne(num) ; 

setListeLivresdl, 12, 13); 

} 

De cette facon, le terme super ( ) represente le constructeur de la classe superieure, les valeurs 
relatives au nom, au prenom et a la date de naissance sont passees en parametres (O) et 
permettent d' initialiser les proprietes de la classe mere, lors de son appel. 

Ensuite, les donnees specifiques au lecteur sont enregistrees a l'interieur des proprietes 
numAbonne et listeLivres (©). 

Ainsi, l'objet uneLectrice est construit par appel du constructeur de la classe Personne a 
l'interieur du constructeur de la classe Abonne. 



Remarque 

Le terme super est obligatoirement la premiere instruction du constructeur de la classe derivee. 



Le polymorphisme 

La notion de polymorphisme decoule directement de l'heritage. Par polymorphisme, il 
faut comprendre qu'une methode peut se comporter differemment suivant l'objet sur 
lequel elle est appliquee. 

Dans notre exemple, la methode sePresente( ) est decrite dans la classe Personne et dans 
la classe Abonne. Lorsqu'une methode est definie a la fois dans la classe mere et dans la 
classe fille, le lecteur Flash execute en priorite la methode de la classe fille. 

Le choix s'effectue par rapport a l'objet sur lequel la methode est appliquee. Observons 
1' execution du programme suivant : 

//© Creer un lecteur 

var uneLectrice: Lecteur = new LecteurC'Elena", "T.", 

"16/03/1993", "0102030405", 
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"La plaisanterie", 
"Le mystere de la chambre jaune", 
"Peter Pan" ); 
t race (uneLect rice. sePresentet ) ) ; ) ; 

//© Creer une personne 

var unGarcon : Personne = new Personnel "Ni col as" , "C", "10/06/1996"); 
trace(unGarcon.sePresente( ) ) ; 

O L'appel du constructeur de l'objet uneLectri ce realise un objet de type Lecteur. Lors- 
que cet objet se presente, le lecteur Flash utilise la methode sePresente( ) de la classe 
Lecteur. L' application affiche : 

Numero : 01020304 

Liste des livres empruntes : 

La plaisanterie 

Le mystere de la chambre jaune 
Peter Pan 



Remarque 

Lorsqu'une methode heritee est definie une deuxieme fois dans la classe derivee, I'heritage est sup- 
prime. Le faitd'ecrire uneLectrice.sePresente( ) ne permet plus d'appeler directement la methode 
sePresente( ) de la classe Personne. 



L'afhchage des nom, prenom et de l'age a disparu. 

© L'objet unGarcon est ensuite cree puis affiche a l'aide de la methode sePresente( ) de la 
classe Personne. unGarcon etant de type Personne, les donnees s'affichent comme suit : 

Je m'appelle Nicolas C. 
J'ai 11 ans 

Appeler la methode de la classe superieure 

Afin d'afficher les nom, prenom et age d'un lecteur, il est necessaire d'appeler la 
methode sePresente( ) de la classe mere, avant d'afficher les caracteristiques d'un lecteur. 
Pour appeler la methode definie dans la classe superieure, la solution consiste a utiliser le 
terme super, afin de permettre au lecteur Flash de rechercher la methode a executer en 
remontant dans la hierarchie. 

La nouvelle methode sePresenteC ) s'ecrit comme suit : 

//Definition du comportement sePresenteO 
override public function sePresente( ) :String { 

var annoncerString = super. sePresenteO; 

annonce += "\nNumero : " + numAbonne; 

annonce += "\nListe des livres empruntes :"; 

for(var i:Number = 0; i < listeLivres. length; i++) 
annonce += "\n\t"+listeLivres[i]; 

return annonce; 

} 
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Remarque 

Le terme override doit obligatoirement etre place devant le nom de la fonction ecrite dans la classe fille 
(ici Lecteur) sous peine d'obtenir I'erreur : Neutral i sati on d'une fonction non marquee override 
en cours de compilation. 



Dans notre exemple, super. sePresente( ) permet d'appelerla methode sePresente( ) de la 
classe Personne. Cette instruction retourne la chaine de caracteres contenant les nom, 
prenom et age du lecteur. Cette chaine est enregistree dans la chaine de caracteres 
annonce. Le reste des caracteristiques du lecteur est ensuite place a la fin de la chaine 
annonce par concatenation (+=). 

Grace a cette technique, si la methode d'affichage pour une Personne est transformee, 
cette transformation est automatiquement repercutee pour un Lecteur. 

Une personne se presente avec sa photo 

L'objectif de cet exemple est d'ameliorer les programmes donnes en exemple precedem- 
ment afin d'afficher, cette fois-ci, les informations relatives a une personne non plus a 
l'aide de la commande trace( ), mais par 1' intermediate de sa photo. L' application finale 
se presente ainsi (voir figure 9-3) : 

Figure 9-3 

Au survol de la souris, 
la photo fournit les infor 
mations concernant 
la personne qu 'elle 
represente. 



La realisation de cette application passe par les etapes suivantes : 

1. Modifier la classe Personne de facon a ce qu'elle herite de la classe Sprite. 

2. Ajouter une propriete photo a la classe Personne. 

3. Creer et afficher la photo de deux objets uneFi 1 1 e et unGarcon de type Personne depuis 
1' application UnePersonneEtSaPhoto.fi a. 

4. Definir, dans la classe Personne . as, le comportement sAf f i che( ) qui a pour resultat de 
placer sur la scene une photo. 

5. Definir les comportements au survol de la souris sur une photo afin d'afficher une 
bulle d'information ou de l'effacer. 

Heriter de la classe Sprite 

Lorsqu'une classe personnalisee herite de la classe Sprite elle beneficie, en plus des 
proprietes et des methodes qui la definissent, des proprietes et des methodes natives de la 
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classe Sprite. Elle herite par exemple des proprietes (x, y...)> des methodes (startDrag( )...) 
et des gestionnaires d'evenements. 

La classe Personne herite de la classe Sprite 

Pour que la classe Personne herite de la classe Spri te, il suffit de modifier l'en-tete de defi- 
nition de la classe Personne comme suit : 

public class Personne extends Sprite ( 

//Definition des proprietes et des methodes 
} 

De plus, nous devons inserer une nouvelle propriete de type Loader qui sera le support 
d'affichage de la photo de la personne. Nous nommons cette propriete photo. 

La classe Personne se presente maintenant de la facon suivante : 

public class Personne extends Sprite { 
private var prenom:String; 
private var nom:String; 
private var dateNaissance:Date; 
private var photo: Loader: 

//Definition des methodes 
} 

La propriete photo est de type Loader. En effet, la classe Loader fournit les outils qui vont 
nous permettre de charger dynamiquement le fichier image de type JPG correspondant a 
la photo d'une personne. 

Creer des personnes avec photo 



Extension web 

Vous pourrez tester cet exemple en executant le fichier UnePersonneEtSaPhoto.fi a, sous le repertoire 
Exempl es/Chapi tre9/Spri te. 



L'appel du constructeur 

Tout comme pour les exemples decrits au cours des sections precedentes, la creation 
d'une personne est realisee par le constructeur de la classe Personne. Ainsi, par exemple, 
1' application UnePersonneEtSaPhoto.fi a cree deux personnes, uneFil le et unGarcon, a l'aide 
des instructions : 

var uneFille:Personne = new Personnel "Elena" , "L.", "16/04/1993"); 
var unGarcon:Personne = new PersonneCNicolas", "C", "10/07/1996"); 

L'appel du constructeur n'a pas change par rapport aux differents constructeurs 
Personnel ) decrits dans ce chapitre. Pourtant, il existe en realite deux differences fonda- 
mentales : 

1. Le constructeur est charge d' initialiser la nouvelle propriete photo. Un nouveau para- 
metre indiquant le chemin d'acces a la photo ainsi que le nom du fichier aurait pu etre 
ajoute en parametre du constructeur. 

Pour initialiser la nouvelle propriete photo, nous avons choisi de nommer le nom du 
fichier correspondant a la photo avec le prenom de la personne. Ainsi, pour notre 
exemple, la photo d'Elena a pour nom Elena.jpg. Puisque le prenom correspond au 
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premier parametre du constructeur, il n'est nul besoin, pour notre cas, d'ajouter un 
nouveau parametre indiquant le nom du fichier photo. 

Ce faisant, a l'appel du constructeur, la photo est presente en memoire et peut etre 
ensuite affichee. 

2. L' objet retourne par le constructeur (stocke dans uneFille ou unGarcon) est de type 
Personne et peut aussi etre manipule comme un Sprite puisque la classe Personne 
herite de la classe Sprite. Les objets uneFille et unGarcon, une fois crees, sont done 
positionnes sur la scene, en modifiant leurs proprietes x et y. lis s'afhehent en les 
placant dans la liste d'afhehage de l'application grace a la fonction addChi 1 d( ) (voir la 
section « Afficher et positionner les personnes » plus bas dans ce chapitre). 

La definition du constructeur 

Dans la classe Personne. as, le constructeur est modifie arm d'initialiser correctement la 
propriete photo. Examinons plus attentivement son code : 

public function Personne ( p:String, n:String, dn:String) { 
//Initialiser la propriete photo 
setPhoto(p + ".jpg"); } 

//Initialiser les autres proprietes de la classe 
setNom(n) ; 
setPrenom(p) ; 
setDateNaissance(dn) ; 

} 

La propriete photo de l'objet en cours de creation est initialisee grace a la methode 
setPhoto(p+" . jpg"). Le parametre de la fonction indique a la methode setPhotoO que le 
fichier a charger a pour nom : le prenom de la personne (stocke dans le parametre p) suivi 
de 1' extension .jpg. 



Remarque 

Le fichier d'extension .jpg se situe dans le repertoire ou se trouve l'application en cours d'execution. 
Ainsi, pour notre exemple, les deux fichiers Elena.jpg et Ni col as. jpg sont situes dans le meme reper- 
toire que l'application UnePersonneEtSaPhoto.fi a. Si vous souhaitez placer les photos dans un sous- 
repertoire nomme par exemple Photos, l'appel a la methode setPhoto( ) aura pour forme : 

setPhotoC'Photos/" + p + ".jpg"); } 



Le code de la methode setPhoto( ) est le suivant : 
public function setPhoto(url :String) :void { 

//© La propriete photo est creee 
photo= new Loader( ) ; 
//© Le fichier est charge 
photo. 1 oadtnew URLRequest(url ) ) ; 

//© Lorsque le chargement de la photo est termine, 
// un evenement de type Event. COMPLETE est emis 
// la methode auComplet est executee 

photo. content Loader I nfo.addEvent Listener (Event. COMPLETE, auComplet) ; 

} 

//La methode auComplet appelle la methode sAfficheO 
private function auComplet(evt:Event):void ( 
sAffiche(photo) ; 

} 
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O La propriete photo est de type Loader, la classe Loader offrant tous les outils neces- 
saries au chargement d'un fichier image. La propriete photo est creee en memoire en 
faisant appel a l'operateur new suivit du constructeur de la classe Loader. 

© Le richier image est charge en memoire par l'intermediaire de la methode loadO 
definie par la classe Loader. La methode loadO demande en parametres le chemin 
d'acces ainsi que le nom du fichier a charger. La validite du chemin ainsi que le 
controle de l'existence du richier sont verifies grace au constructeur URLRequest( ). Si 
le chargement reussit, un evenement compl ete est emis. 

© Un gestionnaire d'evenement Event. COMPLETE est ajoute a la propriete photo afin 
d'afficher cette derniere lorsque le chargement est termine. Laffichage de la photo 
est realise par la methode sAffiche( ) decrite ci-apres. 

Afficher la photo et les donnees d'une personne 

Le code de la fonction sAf f i che( ) se presente maintenant de la facon suivante : 

//Dans tmp se trouve la photo chargee par setPhotoO 
public function sAffiche(tmp:Loader) :void { 

//© La photo chargee est ajoutee a la liste d'affichage 

addChild(tmp); 

//© Definition des gestionnai res d'evenements 
// au survol de la souris sur la photo 
tmp.addEventListener(MouseEvent.MOUSE_OVER, auSurvol ) ; 
tmp.addEventListener(MouseEvent.MOUSE_OUT, al Exterieur) ; 
//© Creation et positionnement de l'infobulle 
// L'infobulle n'est pas encore affichee 
info = new BulleClpO; 
info.x = 2*tmp. width/3; 
info.y = tmp. height/3; 

//© Les nom, prenom et age sont recuperes par les methodes 
// en get et places dans le champ de texte labelOut 
info. labelOut. text = "Je m'appelle " + getPrenomO + " " 

+ getNomO +"\net j'ai "+ getAgeO + " ans"; 

} 

//© Definition de Taction auSurvol (methode privee) 
private function auSurvol (event:MouseEvent) :void { 

//Au survol de la souris, l'infobulle est placee 

//dans la liste d'affichage 

addChild(info); 

} 

//© Definition de 1 'action alExterieur (methode privee) 
private function al Exterieur(event:MouseEvent) :void { 

//Lorsque le curseur de la souris ne survole plus la photo 

//l'infobulle est supprimee de la liste d'affichage 

removeChild(info); 

} 

O Laffichage de la photo est realise en ajoutant celle-ci a la liste d'affichage, grace a 
1' instruction addChild(tmp). Lobjet tmp, place en parametre de la fonction sAffichet ), 
contient toutes les informations relatives a la photo chargee par l'intermediaire de la 
methode setPhotoO. 
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© Au survol du curseur de la souris sur la photo, une infobulle apparait, puis disparait 
lorsque le curseur sort de la photo. L'affichage de 1' infobulle fournissant le nom, le 
prenom et l'age de la personne s'effectue lorsque le curseur de la souris survole 
1' objet dans lequel a ete chargee la photo, soit tmp. Si le curseur de la souris sort de 
1' infobulle, cette derniere est effacee. 

Ces deux actions se traduisent par la mise en place de gestionnaires d'evenements 
MouseEvent.MOUSE_OVER et MouseEvent.M0USE_0UT. Les actions a mener a reception de ces 
deux evenements sont respectivement auSurvoK) et al Exterieur( ). Pour afficher 
l'infobulle relative a chaque personne, la methode auSurvol ( ) ajoute l'objet info a la 
liste d'affichage alors que pour effacer cette meme infobulle, la methode al Exterieur( ) 
le supprime. L'objet info est cree par la methode sAfficheO comme suit. 

© L'objet i nf o est cree a partir du clip Bui 1 eCl p present dans la bibliotheque de l'appli- 
cation en utilisant l'operateur new. II est place sur la scene au deux tiers de la largeur 
de la photo et a un tiers de la hauteur. 

0 Les informations concernant les nom, prenom et age de la personne sont placees dans 
le champ de texte dynamique label Out de l'objet info. Les valeurs sont recuperees par 
les methodes d'acces en consultation getPrenom( ), getNom( ) et getAge( ). 



Remarque 

La classe Personne fait appel a un certain nombre de classes definies par le langage ActionScript 3.0. 
II convient d'importer ces classes pour eviter des erreurs de compilation. L'import est realise en inserant 
les instructions suivantes : 

//Importer la classe Sprite et Loader 

import flash. display.*; 

//Importer la classe MouseEvent 

import fl ash. events.*; 

//Pour charger la classe URLRequest 

import fl ash. net. URLRequest; 

a I'interieur du package mais en dehors de la classe Personne. 



Afficher et positionner les personnes 

La photo d'une personne est une propriete de la classe Personne. Pour afficher la photo 
des objets uneFille et unGarcon, il convient de placer ces deux objets dans la liste d'affi- 
chage, sous peine de ne jamais voir s'afhcher les photos correspondantes. 

L'affichage et le positionnement des photos sont realises par 1' application 
UnePersonneEtSaPhoto.fla comme suit : 

var largeur:Number = stage. stagewidth; 
var hauteur:Number = stage. stageHeight; 
var taillePhoto:Number = 100; 
var ecart:Number = 10; 

var uneFille:Personne = new PersonneCElena", "L.", "16/04/1993"); 
var unGarconrPersonne = new Personne("Nicolas", "C", "10/07/1996"); 
//O Positionner les objets uneFille et unGarcon 
uneFille. x = largeur/2-taillePhoto-ecart; 
uneFille. y = (hauteur-taillePhoto)/2; 
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unGarcon.x = largeur/2+ecart; 
unGarcon.y = (hauteur-taillePhoto)/2; 
//© Afficher les objets uneFille et unGarcon 
addChild(uneFille); 
addChild(unGarcon) ; 

Une fois crees, les objets uneFi 1 1 e et unGarcon sont centres sur la scene (O), en modifiant 
leurs proprietes x et y. lis s'affichent (@) en les placant dans la liste d'affichage de 1' appli- 
cation grace a la fonction addChi 1 d( ). 

Si Ton regarde un peu plus attentivement le resultat de 1' application, nous nous aperce- 
vons que l'infobulle relative au premier objet (uneFille) est masquee par la photo de 
l'objet unGarcon comme le montre la figure 9-4. 



Figure 9-4 

Linfobulle d' Elena 
s 'ajfiche en dessous de 
la photo de Nicolas. 




En effet, l'objet unGarcon est place dans la liste d'affichage apres l'objet uneFi 1 1 e puisque 
l'instruction addChild(unGarcon) est placee apres l'instruction addChild(uneFille). Pour 
corriger ce petit probleme, nous vous proposons plusieurs solutions : 

1. Une solution assez categorique consiste a faire en sorte que l'infobulle ne vienne 
jamais empieter sur les bords de la photo, comme le montre la figure 9-5. 

Figure 9-5 

Les informations 
s 'affichent sous la 
photo. 




2. La seconde solution consiste a afficher les objets de la droite vers la gauche puisque 
la bulle d'affichage empiete sur le bord droit de la photo. Ce resultat est obtenu tres 
simplement en ajoutant l'objet unGarcon avant uneFille dans la liste d'affichage, 
comme suit : 

//Afficher la photo de droite avant celle de gauche 

addChild(unGarcon); 

addChild(uneFille); 
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3. La derniere solution fait en sorte d'afficher le dernier objet cree « sous » 1' objet 
precedent. Cette methode, un peu plus complexe, est realisee grace aux instructions 
suivantes : 

var conteneur:Sprite = new SpriteO; 
addChild(conteneur) ; 
conteneur. addChildAttuneFil 1 e ,0) ; 
conteneur. addChildAt(unGarcon.O) ; 

Les objets affiches sont tous ajoutes au niveau 0 de la liste d'affichage par l'interme- 
diaire de la methode addChildAt( ). En effet, si Ton ajoute un objet au niveau 0 de la 
liste d'affichage, l'objet se situe au niveau le plus bas. Ici, l'objet uneFille est place 
tout en bas dans la liste d'affichage de l'objet conteneur. Lorsqu'on ajoute ensuite 
l'objet unGarcon (egalement au niveau 0) de l'objet conteneur, l'objet uneFille est 
deplace d'un cran vers le haut dans la liste d'affichage de l'objet conteneur, il se situe 
alors au-dessus de l'objet unGarcon, l'infobulle n'est plus masquee par la photo de 
l'objet unGarcon. 



Remarque 

Nous avons volontairement place les objets uneFille et unGarcon dans un conteneur pour eviter 
d'ajouter ces objets a la liste d'affichage principale qui contient le fond d'ecran ainsi que les legendes 
associees a I'exemple. Ajouter l'objet uneFi 1 1 e au niveau o de la liste principale aurait eu pour effet de 
remonter le fond et les legendes d'un cran. La photo d'E lena aurait ete masquee par ces derniers. 



i Pour en savoir plus 

L'affichage des objets sur la scene est etudie plus precisement au chapitre 2, « Les symboles », section 
« Gestion de la liste d'affichage ». 

Ainsi, cet exemple relativement simple nous montre qu'avec la programmation orientee 
objet, les objets manipules par les applications se comportent de facon autonome : toute 
photo creee s'affiche et se presente avec les informations qui lui ont ete transmises au 
moment de sa creation. Cette operation s'effectue par 1' intermediate d' instructions tres 
simples comme l'appel a une methode (sePresente( )) de la classe (Personne) definissant 
l'objet (uneFille ou unGarcon). 



Memento 

L'objectif principal de la programmation objet consiste a ecrire des programmes qui 
controlent par eux-memes le bien-fonde des operations qui leur sont appliquees. 
Ce controle est realise grace au principe d' encapsulation des donnees. Par ce terme, il 
faut comprendre que les donnees d'un objet sont protegees, de la meme facon qu'un 
medicament est protege par la fine capsule qui l'entoure. L encapsulation passe par : 

• le controle des donnees et des comportements de l'objet a travers les niveaux de 
protection ; 

• Yacces controle aux donnees ; 

• la notion de constructeur de classe. 

Le langage ActionScript propose deux niveaux de protection: public et private. 
Lorsqu'une donnee est totalement protegee (private O), elle ne peut etre modifiee que 
par les methodes de la classe oil la donnee est definie. 
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package { 
public class Memento { 

//© Definition de donnees privees 
private donnee: type 
//© Consulter une donnee 
public function getDonnee( ): type { 
return donnee; 

} 

//© Modifier une donnee 

public function setDonnee(nvldonnee:type):void { 
donnee = verfication(nvldonnee) ; 

} 

//© Constructeur 
public function Memento(){ 
donnee = verification(donnee) ; 

} 

//© Methode metier verifiant la validite des donnees 
private veri ficati on (tmp: type) : type { 

//Si tmp n'est pas valide, le modifier pour qu'il le soit 
return tmp; 

} 

} 

} 

On distingue les methodes qui consultent la valeur d'une donnee sans pouvoir la modifier 
(accesseur en consultation - ©) de celles qui modifient apres controle et validation la 
valeur de la donnee (accesseur en modification - ©). 

Le constructeur (©) est une methode particuliere, declaree uniquement publ i c, qui porte 
le meme nom que la classe ou il est defini. II permet le controle et la validation des 
donnees des leur initialisation par 1' intermediate de methodes definies en mode prive 
(methode metier - ©). 

U heritage permet la reutilisation des objets et de leur comportement, tout en apportant 
de legeres variations. II se traduit par le principe suivant : une classe B herite d'une 
classe A (B etant une sous-classe de A) lorsqu'il est possible de mettre la relation « est un » 
entre B et A. 

De cette fagon, toutes les methodes, ainsi que les donnees declarees publ ic de la classe A 
sont applicables a la classe B. La syntaxe de declaration d'une sous-classe est la suivante : 

public classB extends A { 

//Donnees et methodes de la classe B 
} 

Exercices 

Un menu deroulant 

Lobjectif de cette suite d'exercices est d'ecrire une classe Menu qui, a l'appel de son 
constructeur, place sur la scene l'en-tete d'un menu. Lorsque l'utilisateur clique sur 
l'en-tete (voir figure 9-5-©), le menu se deroule en proposant un ensemble d'items selec- 
tionnables (voir figure 9-5-©). 
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Le theme du menu, le label des items ainsi que leur nombre sont entierement parametrables. 



Figure 9-6 

Lorsque I'utilisa- 
teur clique sur Ven- 
tete (O)du menu, ce 
dernier deroule la 
liste des items (&) 
qui lui est associee. 




TroiS menus 
construits c portir de 
la classe Menu 



Exercice9 1a8.lla 





Extension web 

Pourvous faciliterla tache, les symboles proposes pourchacun des exercices sont definis dans le fichier 
Exercice9_l .fl a, situe dans le repertoire Exercices/SupportPourRealiserLesExercices/ 
Chapitre9. Dans ce meme repertoire, vous pouvez accedera I'application telle que nous souhaitons la 
voirfonctionner(Exercice9_*.swf, * variant de 1 a 8) une fois realisee. 



Pour obtenir un menu deroulant, vous devez proceder en plusieurs etapes a realiser en 
suivant les exercices ci-apres. 

Exercice 9.1 

La premiere pierre a 1' edifice d'un menu deroulant est l'affichage d'un item, a une posi- 
tion donnee, avec des comportements qui different en fonction des evenements produits 
par la souris. 

Nous supposons que l'item portant le label Photo est cree a l'aide des trois instructions 
suivantes : 

var rubrique:Array = new Array ("Photo", 3); 
var unltem: Item = new Item(250, 250, rubrique); 
addChild(item) ; 

ou : 

• unltem correspond au nom de 1' occurrence ; 

• 250 et 250, a la position du clip en x et en y ; 

• rubrique, au tableau dans lequel est defini le texte a placer sur l'item et une valeur 
correspondant, par exemple, a un nombre de photos a afficher. 

Reprenez la classe Item, ecrite au chapitre precedent (voir exercice 8-6) et : 

1. Etendez la classe Item a la classe Sprite. 

2. Definissez la propriete cetltem de type ItemMenuClp (voir la bibliotheque du fichier 
Exercice9_l.fla destine au support). 

3. Modifiez le constructeur afin de creer et d' afficher une occurrence du symbole 
ItemMenuCl p, puis enregistrer cette derniere dans la propriete cetltem. 



366 



Apprendre a programmer en ActionScript 3 



4. Positionnez la propriete cetltem a l'aide des coordonnees ecrites en parametres du 
constructeur. Placez le nom de la rubrique fournie en parametre du constructeur par 
1' intermediate du tableau rubrique, dans le champ de texte dynamique label Out. 

5. En utilisant les possibilites des classes dynamiques (ItemMenuClp est un MovieCl ip qui 
est elle-meme une classe dynamique), ajoutez deux nouvelles proprietes au clip 
cet-Item que vous nommerez label et nbElt. 

6. Executez le programme Exerc1ce9_l.fla avec la nouvelle classe Item et verifiez que 
l'item Photo s'afhche correctement. 

Exercice 9.2 

Modifiez le constructeur de la classe Item et definissez les gestionnaires d'evenements 
MouseEvent.MOUSEJUT, MouseEvent.MOUSEJVER et MouseEvent.MOUSEJJP de facon a ce que 
lorsque : 

1. le curseur de la souris survole l'item Photo, celui-ci paraisse plus clair ; 

2. le curseur sort de l'item, celui apparaisse normalement ; 

3. l'utilisateur clique sur l'item, un texte apparaisse dans la fenetre de sortie, indiquant 
le label de l'item et le nombre d'elements nbElt enregistres pour ce label (voir 
figure 9.6). 

Executez le programme Exercice9„2.fla avec la nouvelle classe Item et verifiez que 
l'item Photo s'affiche et reagit correctement en fonction des actions de l'utilisateur. 



Figure 9-7 

Lorsque l'utilisa- 
teur clique sur l'item 
Photo, un message 
indiquant le nom du 
label et le nombre 
d'elements associes 
au label s 'affiche 
dans la fenetre de 
sortie. 




Exercice 9.3 

Dans le fichier Exercice9_3.fl a, copiez la fonction creerRubrique( ) suivante : 

function creerRubrique(nom:String, nbElt: Number): Array { 
var theme:Array = new Arraytnom, nbElt); 
return(theme) ; 

} 

1. A l'aide de cette fonction, creez 3 rubriques nominees Villes, Mers, et Fleurs, 
chacune composees de 10, 12 et 16 elements respectivement. Enregistrez ces 3 rubri- 
ques dans un tableau nomme, par exemple, rubriqueP. La rubrique Vi 1 1 es et sa valeur 
seront stockees a l'indice 0 du tableau rubriqueP, la rubrique Mers et sa valeur a 
l'indice 1, etc. 
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2. A l'aide d'une boucle for, creez autant d'items qu'il y a d'elements dans le tableau 
rubriqueP. Faites en sorte que chaque item cree soit place l'un en dessous de 1' autre, 
comme le montre la figure 9-7. 



Remarque 

La position sur la scene estdirectement liee a I'indice de I'element dans le tableau rubriqueP. 



3. Executez le programme Exercice9_3.fl a et verifiez que chaque item s'affiche etreagit 
correctement en fonction des actions de l'utilisateur. Par exemple, si l'utilisateur 
clique sur l'item Fleurs, le message « J 'affiche les 16 elements de la rubrique Fleurs » 
doit apparaitre dans la fenetre de sortie. 

Exercice 9.4 

Un Menu est defini par les proprietes et les methodes suivantes (voir la classe Menu construite 
au chapitre precedent, a la section « Exercice - Creer un menu interactif » : 

package { 
import flash. display.*; 
import flash. events.*; 

//Definition de la classe Menu extends Sprite 
public class Menu extends Sprite! 

//Definition des attributs de la classe 

private var entete:ItemMenuClp; 

private var 1 i steltems :Array ; 

public var estVisible:Boolean = false; 

private function aDerouler(nbr:Number) :void( 
//Le menu deroule les items et devient visible 

} 

private function aEnrouler(nbr:Number) :void( 

//Le menu enroule les items et devient 
//invisible (sauf 1'en-tete) 

} 

private function ajouterUnItem(rubrique:Array) :void{ 

//Creer et ajouter un item a la liste listeltems 

} 

//Definition de la fonction constructeur 

public function Menu(nom:String,nx:Number, ny:Number, l:Array)( 

//Le menu est constitue d'un en-tete et d'une suite d'items 

} 

} 

} 

1. En vous inspirant des exercices precedents, et en examinant les parametres du construc- 
teur MenuO, ecrivez les instructions de Implication Exercice9_4.fla, qui creent le 
menu Photo, compose de 3 items correspondant aux rubriques Vi 1 1 es, Mers, et Fl eurs, 
chacune composee de 10, 12 et 16 elements respectivement. 

2. Dans le fichier Menu . as, modifier le constructeur sachant qu'a son appel, l'application : 

- Affiche l'en-tete du menu a la position fournie en parametre. L' en-tete est une 
occurrence du symbole ItemMenuCl p qui a pour label le nom fourni en premier para- 
metre du constructeur. 

- Cree le tableau 1 i steltems defini comme propriete de la classe Menu. 
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- A l'aide d'une boucle for, cree autant d'items qu'il y a d'elements dans le tableau 
fourni en dernier parametre du constructeur. Utilisez pour cela la methode 
ajouterUnItem( ) en veillant a passer les bons parametres. 



Remarque 

Pour rendre I'effet de deroulement du menu, les items sont places sous l'en-tete du menu. L'en-tete dolt 
done etre cree a un niveau de profondeur superieur a celui des items. Pour cela, vous devez utiliser la 
methode 3 proposee en section « Afficher et positionner les personnes » de ce chapitre. Cette metfiode 
consiste a placer chaque elementau niveau 0 par I'intermediaire de la methode addChildAtdinltem, 
0). De cette fegon, le premier element place dans la liste d'affichage se trouve toujours au-dessus des 
elements suivants. 



3. La methode ajouterUnItem( ) cree un item a l'aide du constructeur de la classe Item. 
La position de l'item au moment de sa creation est identique a celle de l'en-tete. 
Chaque item est cree au niveau 0 de la liste d'affichage. Une fois l'item cree, la 
nouvelle occurrence est enregistree dans le tableau listeltems grace a la methode 
push( ). 

4. Executez le programme Exercice9_4.fla et verifiez que l'en-tete du menu s'affiche 
correctement. Que se passe-t-il lorsque vous cliquez sur l'en-tete du menu ? Pour- 
quoi ? Comment faire pour que les items n'apparaissent plus sous l'en-tete du menu 
et qu'ils ne reagissent plus au clic de souris ? 

Exercice 9.5 

A ce stade de la programmation, l'en-tete du menu ne reagit pas aux actions de l'utilisateur. 
Modifier le constructeur Menu( ) de facon a ce que : 

1 . L'intensite de la couleur de l'en-tete varie en fonction des evenements MouseEvent . M0USE_ 
OUT et MouseEvent. MOUSEJVER receptionnes par l'objet entete. 

2. Les methodes aEnroul er( ) et aDeroul er( ) soient appelees selon l'etat du menu (enroule 
ou non). Pour cela, vous devez mettre en place un mecanisme de drapeau, en utilisant 
la propriete estVisible de la classe Menu. 

- Si estVisible est a false, le menu est a derouler. Appelez la methode aDeroulerO. 
La propriete estVisible passe alors a true. 

- Si estVisible est a true, le menu est a enrouler. Appelez la methode aEnroul er( ). La 
propriete estVisible passe a false. 

3. Afin de verifier le bon fonctionnement du drapeau, modifier les methodes aEnroulert ) 
et aDeroul er( ) pour qu'elles affichent, dans la fenetre de sortie, un commentaire indi- 
quant si le menu se deroule ou s'enroule. 

4. Executez le programme Exercice9_5.fla et verifiez que l'en-tete du menu s'affiche et 
reagit correctement aux actions de l'utilisateur. 

Exercice 9.6 

Lorsque l'utilisateur clique sur l'en-tete du menu, celui-ci doit se derouler. Le deroulement 
et l'affichage du menu sont realises par la methode aDeroulerO. 



1. La technique consiste a parcourir l'ensemble de la liste des items (1 isteltems), et 
pour chaque item de la liste appeler la methode afficherO de la classe Item. 
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La methode afficherO prend en parametre la position finale en y de l'item. Cette 
position est calculee en fonction de l'indice de l'item dans le tableau 1 isteltems (voir 
exercice 9.3). 



Remarque 

La position initiale de litem etsa hauteur sontcalculees en recuperantles proprietes .y et .height de 
l'en-tete. 



2. La methode afficherO est definie dans le fichier Item. as. Le deplacement des items 
est visible. La propriete visible de l'item concerne doit etre reinitialisee a true. Pour 
visualiser le deplacement : 

- Mettez en place un gestionnaire d'evenement Event. ENTER_FRAME sur l'item en cours 
de traitement. Laction a mener est realisee par la methode seDepl aceVersLeBas( ). 

- Stockez la position finale passee en parametre de la fonction afficherO dans une 
nouvelle propriete privee de la classe Item que vous nommerez positionFinale. 

- L'item se deplace vers le bas en incrementant la propriete y de l'item en cours de 
traitement, a l'aide de la propriete vitesse. 

- Le deplacement s'arrete lorsque la position de l'item depasse la valeur enregistree 
dans la propriete positionFinale. 

- Pour etre sur que l'item se positionne a la position indiquee en parametre, initiali- 
sez la propriete y de l'item a la valeur positionFinale et supprimez l'ecoute de 
l'evenement Event. ENTER_FRAME. 

3. Executez le programme Exerci ce9_6 . f 1 a et verifiez que l'en-tete du menu s'affiche et 
se deroule correctement lorsque l'utilisateur clique sur l'en-tete du menu. 

Exercice 9.7 

Le menu doit maintenant s'enrouler lorsque Ton clique a nouveau sur l'en-tete. Lenrou- 
lement du menu est realise par la methode aEnroul erO. La technique est identique a celle 
realisee par la methode aDeroulerO. 

1. Parcourez l'ensemble de la liste des items (1 i steltems) et pour chaque item de la liste, 
appelez la methode ef facerO de la classe Item. La methode eff acer( ) prend en para- 
metre la position finale en y de l'item, c'est-a-dire la position en y de l'en-tete. 

2. La methode effacer( ) est definie dans le fichier Item. as. Pour visualiser le depla- 
cement : 

- Mettez en place un gestionnaire d'evenement Event. ENTER_FRAME sur l'item en cours 
de traitement. L' action a mener est realisee par la methode seDepl aceVersLeHautO. 

- Stockez la position finale passee en parametre de la fonction effacerO dans la 
propriete privee de la classe Item nommee positionFinale. 

- L'item se deplace vers le haut en decrementant la propriete y de l'item en cours de 
traitement, a l'aide de la propriete vitesse. 

- Le deplacement s'arrete lorsque la position de l'item depasse la valeur enregistree 
dans la propriete positionFinale. 
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- Pour etre stir que l'item se positionne a la position indiquee en parametre, initiali- 
sez la propriete y de l'item a la valeur positionFinale et supprimez l'ecoute de 
l'evenement Event. ENTER_FRAME. 

- L'item en cours de traitement redevient invisible. 

3. Executez le programme Exerci ce9_7 . f 1 a et verifiez que l'en-tete du menu s'affiche, se 
deroule et s'enroule correctement lorsque l'utilisateur clique dessus. 

Exercice 9.8 

Lorsque le menu est deroule, il doit s'enrouler lorsque Ton clique soit sur l'en-tete, soit 
sur un des items ou ailleurs sur la scene. 

Pour enrouler le menu lorsque l'utilisateur clique ailleurs que sur le menu, il convient de 
mettre en place un ecouteur d'evenement lie au focus de la souris. 



Remarque 

Dans le jargon informatique, on dit qu'un objet « a le focus », lorsqu'il a ete selectionne par un die de 
souris. Ainsi, par exemple, pour ecrire dans une fenetre, il faut avoir clique dessus car la reception des 
evenements clavier n'est possible que si la fenetre a le focus. 



Le focus n'est donne qu'a un seul et unique objet a l'ecran. Ainsi, si l'en-tete du menu 
perd le focus, cela signifie que l'utilisateur a clique ailleurs sur la scene (sur un item, un 
autre menu ou sur le fond de l'ecran). Dans toutes ces situations, le menu doit s'enrouler. 

Pour detecter la perte de focus, utilisez un gestionnaire d'evenement de type 
FocusEvent . F0CUS_0UT. La mise en place du gestionnaire s'effectue comme suit : 

entete. add Event Li stener( Focus Event. F0CUS_0UT, unCl icAilleurs) ; 

1. La tache principale du gestionnaire est d' enrouler le menu en cours des qu'il recoit 
un clic de souris. Quelles sont les instructions a placer au sein de la methode 
unClic-Ailleurs( ) ? 

2. Executez le programme Exerci ce9_8. fl a et verifiez que l'en-tete du menu s'affiche, se 
deroule et s'enroule correctement lorsque l'utilisateur clique ailleurs que sur l'entete. 

Le projet mini site 

Les classes Forme, TitreTetxe, Rubrique, LesMinis et Page realisees au chapitre precedent 
vont nous etre d'une grande aide pour realiser la nouvelle version du mini site. 

II s'agit ici de comprendre quels sont les enchainements de creation des objets et la facon 
dont ils s'associent pour realiser les bonnes interactions. Pour cela, vous devez realiser 
les etapes decrites ci-apres. 



Extension web 

Pour vous faciliter la tache, tous les fichiers necessaires a la realisation du projet se trouvent dans le 
repertoire Projet/SupportPourRealiserLeProjet/Chapitre9. Dans ce meme repertoire, vous 
pouvez accedera I'application telle que nous souhaitons la voirfonctionner(ProjetChapitre9.swf) une 
fois realisee. 
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Les elements de base 

Comme nous l'avons observe au chapitre precedent, le mini site utilise deux classes de 
base pour se construire : la classe Forme et la classe TitreTexte. 

Examinons comment dessiner sur la scene un objet de type Forme ou de type TitreTexte. 
La classe Forme 

Reprenez la classe Forme definie au chapitre precedent et transformez-la, en remarquant 
que : 

• la classe Forme herite de la classe Sprite ; 

• la methode seDessi ner( ) reprend les instructions de la fonction creerUneForme( ) etudiee 
au chapitre 7, « Les fonctions », section « Le projet mini site » ; 

• la forme est creee en (0, 0) et reagit aux evenements de type MouseEvent.MOUSE_OVER et 
MouseEvent.M0USE_0UT. 

La classe TitreTexte 

Reprenez la classe TitreTexte definie au chapitre precedent et modifiez-la en observant que : 

• la classe Ti treTexte herite de la classe Spri te ; 

• la methode dessinerVertical ( ) reprend les instructions de la fonction creerTexteVertical ( ) 
etudiee au chapitre 7, « Les fonctions », section « Le projet mini site » ; 

La methode dessinerHorizontalO est utilisee pour afficher le nom des rubriques lors du 
survol des mini rubriques. Cette methode a beaucoup de points communs avec la methode 
dessinerVertical ( ). Les differences resident dans le fait qu'il convient de : 

• ne pas transformer le contenu puisque le texte s'affiche horizontalement ; 

• ne pas ajouter un fond, le curseur ne se transformant en main qu'au survol des mini 
rubriques et non du texte. 

Police embarquee 

Si vous n'utilisez pas une fonte par defaut (Arial, Times. . .), vous devez « embarquer » la 
police de caracteres au sein de 1' application. Pour cela, il convient de realiser les etapes 
suivantes : 

• Importez la police dans la bibliotheque, en cliquant droit dans la barre de navigation du 
panneau Bibliotheque. Dans le menu contextuel, selectionnez l'item Nouvelle police. 
Selectionnez la police a embarquer et attribuez-lui un nom. Pour notre exemple, la 
police embarquee est Arista et se nomme Arista Font. 

• Definissez une liaison, en cliquant droit sur le nom de la police qui apparait au sein de 
la bibliotheque. Dans le menu contextuel, selectionnez l'item Liaison et choisissez 
un nom de classe comme propriete de liaison. Pour notre exemple, la classe porte 
egalement le nom d'AristaFont. 

• Dans le constructeur de la classe TitreTexte, inserez les lignes suivantes : 
Font.registerFont( AristaFont ); 

Font. regi ster Font (ApplicationDoma in. cur rent Domain.getDefiniti on ( 
"AristaFont") as Class); 
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La methode registerFont( ) est utilisee pour enregistrer une classe de police definie a 
l'interieur de la bibliotheque, dans la liste globale de polices. 



Remarque 

Afin d'eviter une erreur de compilation, vous devez importer la librairie flash. system au sein de la 
classe TitreTexte. 



Pour finir, la propriete embed Fonts de la zone de texte utilisee pour afficher le titre de la 
rubrique ou de la page doit etre initialisee a true. 

La classe MiniSite ou comment creer la page d'accueil 

La classe MiniSite est le point de depart du lancement du site. Cette nouvelle classe va 
nous permettre de definir l'ensemble des proprietes du site et son mode de construction. 

Proprieties de la classe MiniSite 

Le mini site est construit a partir de valeurs « constantes » qui definissent : 

• la taille des differents elements du site (rubrique, page. . .) ; 

• le nom et la couleur de chacun des elements ; 

• la quantite d' information a afficher par page (nombre de photos, de videos. . .). 

L'ensemble de ces valeurs est defini par 1' intermediate de variables public et static 
puisqu'elles seront utilisees par les differentes classes du mini site. Ainsi par exemple, 
vous pouvez definir la variable largeurMini comme suit : 

public static var largeurMini :Number = 20; 

En declarant la propriete largeurMini de cette facon, nous pouvons l'utiliser au sein de 
n'importe quelle autre classe, en ecrivant MiniSite. largeurMini au lieu de largeurMini. 

Pour definir et initialiser correctement ces variables, reportez-vous au programme 
ProjetChapire7.fla. 

Le mini site possede egalement deux autres proprietes nominees 1 isteRubriques et 
1 isteTitreRubrique de type Array. Ces proprietes sont initialisees au sein du constructeur 
Mi ni Si te ( ). 

Construction de la classe MiniSite 

Le constructeur de la classe MiniSite a pour role d'afficher le titre du site ainsi que les 
rubriques qui apparaissent en transparence tout en se deplacant. 

Remarque 

Le site estcree et affiche grace aux instructions : 

var si te : Mi m' Si te = new MiniSitedargeur, hauteur); 
addChild(site); 

Ces instructions sontplacees au sein de I'application ProjetChapitre9.fla. Les parametres largeur 
et hauteur sont initialisees a la largeur et la hauteur de la scene respectivement. 
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Dans le programme ProjetChapire7.fla, reprenez les instructions de creation du titre du 
site, ainsi que celles qui initialisent les tableaux UsteRubriques et UsteTitreRubrique. 
Inserez ces lignes dans le constructeur de la classe Mini Site en observant que : 

• Les deux parametres du constructeur sont utilises pour initialiser les variables statiques 
telles que largeurRubrique, hauteurRubrique, etc. 

• La creation du titre ainsi que les gestionnaires d'evenements MouseEvent .MOUSEJDVER et 
MouseEvent.MOUSE_OUT utilisent exactement le meme jeu d' instructions que celui ecrit 
dans le projet du chapitre 7. Seul le gestionnaire MouseEvent. MOUSEJJP differe, nous 
l'examinons plus precisement dans la section ci-apres. 

• Le tableau 1 iste Rubriques est initialise a l'aide du constructeur de la classe Rubrique et 
le tableau 1 isteTitreRubrique avec le constructeur de la classe TitreTexte comme suit : 

for (i =0; i < listeNoms. length; i++) { 
1 isteTitreRubrique[i ] = new Ti treTextedOO.l isteCoul eurs[i ] , 55, 

"Arista", listeNoms[i]); 
var posX: Number = Math.random()*(largeurScene + 2*1 argeurRubrique) 

- largeurRubrique; 

var posY:Number = Math.random()*(hauteurScene + 2*hauteurRubrique) 

- hauteurRubrique; 
listeRubriques[i] = new Rubriqueti, posX, posY, listeCouleurs[i], 

nbEl t[i ] , 1 isteTitreRubrique[i ] ) ; 

addChi ld(l isteRubriques[i ] ) ; 

} 

Cliquer sur le titre « mini site » 

Lorsque l'utilisateur clique sur le titre, les rubriques se positionnent a nouveau au hasard 
et se deplacent vers leur position respective. 

Ecrivez le gestionnaire clicSurTitre( ) afin qu'il : 

• supprime de la liste d'afhchage, les rubriques creees precedemment ; 

• cree de nouvelles rubriques positionnees au hasard sur la scene ; 

• place les nouvelles rubriques dans la liste d'afhchage. 



La classe Rubrique 

Reprenez la classe Rubri que developpee au chapitre precedent, et completez-la, en observant 
que : 

• Les rubriques se construisent en utilisant le constructeur de la classe Forme. 

• La forme creee est stockee dans la propriete forme de la classe Rubri que alors que le titre 
passe en parametre du constructeur est place dans la propriete titre. 

• La propriete forme est positionnee grace aux parametres nx et ny du constructeur. 

• Le titre est place dans la liste d'afhchage de forme. 

Le emplacement des rubriques 

Les rubriques se deplacent des leur creation en ajoutant le gestionnaire d'evenement 
Event. ENTER_FRAME au sein du constructeur Rubrique( ). 
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L' action a mener est definie par la methode seDepl acerVers ( ) qui reprend en grande partie 
les instructions de la fonction portant le meme nom et definie dans 1' application 
ProjetChapire7.fla. 



Remarque 

Vous devez utiliserles variables definies dans la classe Mini Site, pour calculer les positions finales des 
rubriques. 



Cliquersur une rubrique 

Le gestionnaire MouseEvent . MOUSEJJP est defini lorsque chaque rubrique a trouve sa position 
finale. L' action a mener est cl icSurRubrique( ). 

La methode clicSurRubriqueO realise plusieurs actions : 

• Effacer les rubriques presentes sur la scene. Cette action est realisee par la methode 
rendreInvisiblel_esRubriques( ), comme suit : 

private function rendrelnvisibl eLesRubriquest ) : void ( 
for (var i:Number= 0; i < parent. numChildren; i++) { 
if ( parent. getChildAtO' ) is Rubrique ) { 
parent.getChildAt(i ) .visible^ false; 

} 

} 

} 

La methode calcule le nombre d'enfants crees par le parent de la classe Rubrique (soit le 
nombre de sceurs de la classe Rubrique). Si parmi la liste des soeurs, une est de type 
Rubrique, alors celle-ci devient invisible. 



Remarque 

L'operateur is est utilise pour determiner le type de I'objet evalue. II est employe comme operateur de 
comparaison dans une structure de test de type i f -el se. 



• Creer et afficher une page centree et reduite au centieme de sa taille initiale. 

• Pour lancer l'ouverture de la page selectionnee, ajouter le gestionnaire d'evenement 
Event . ENTER_FRAME sur la page en cours de creation. Laction a mener est la methode 
afficherPage( ). Cette derniere s'ecrit comme suit : 

private function afficherPage(e:Event):void { 
var cible:Page = e.currentTarget as Page; 
cible.agrandi rPageEnXt ) ; 

} 

Levenement Event. ENTER„FRAME est capte par la page en cours de creation. La cible est 
done traitee comme etant de type Page. En typant la cible de la sorte, il devient possible 
d'appliquer la methode agrandirPageEnX() a la cible puisque cette methode est definie au 
sein de la classe Page. 

• Ajouter le gestionnaire d'evenement Event. COMPLETE sur la page en cours de creation. 
Laction a mener est la methode sArreter( ). Cette derniere utilise le meme ciblage que 
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la methode aff icherPage( ). Elle a pour tache de detruire le gestionnaire d'evenement 
Event . ENTER_FRAME. 



La classe Page 

Reprenez la classe Page developpee au chapitre precedent, et completez-la, en observant 
que : 

• Une page se construit en utilisant le constructeur de la classe Forme. 

• La forme creee est stockee dans la propriete forme de la classe Page alors que le titre 
passe en parametre du constructeur est place dans la propriete titre. 

• La propriete forme est positionnee grace aux parametres nx et ny du constructeur. 

• Pour s'afficher, une page utilise les memes methodes agrandi rPageEnX( ) et 
agrandi rPageEnY( ) que celles definies dans l'application ProjetChapi re7 . f 1 a. 

• Le titre de la page ne s'affiche que lorsque la transition d'une page a une autre est 
terminee. L' instruction placant le titre dans la liste d'affichage de la page s'ecrit juste 
avant remission de l'evenement Event . COMPLETE, indiquant que la page a fini son depla- 
cement. 



Remarque 

Les objets de type Page ne reagissent pas aux evenements de type MouseEvent.MOUSE_OVER et 
MouseEvent.MOUSEJUT alors qu'ils sontcomposes d'une « forme » reagissanta ces evenements. Pour 
evitercela, modifiez le constructeur Forme ( ) en ajoutant un nouveau parametre qui indique si la forme a 
creer reagitou non aux evenements M0USE_0VERetM0USE_0UT. Ce parametre est de type Boolean. 

Cliquer sur le titre « mini site » 

Lorsque l'utilisateur clique sur le titre, la page affichee disparait pour laisser apparaitre 
les rubriques se deplacant vers leur position respective. 

Modifiez le gestionnaire cl icSurTitre( ) de la classe Mini Site pour y ajouter l'appel a une 
methode que vous nommerez supprimerLesPages( ). Cette fonction parcourt la liste d'affi- 
chage courante et supprime les enfants de type Page. 

Les mini rubriques 

Les mini rubriques s'affichent lorsqu'une page du site a termine son affichage. Avant 
d'etre affichees, les mini rubriques sont creees en memoire par le constructeur de la 
classe Page. Elles ne sont creees qu'une seule fois avec la premiere page a afhcher. 

Pour ne creer les mini rubriques qu'une seule fois, vous devez utiliser le code suivant : 

if (lesMinisRubriques == null) { 
lesMinisRubriques = new LesMinisO; 
addChi 1 d ( lesMinisRubriques) ; 

} 

L'objet lesMinisRubriques est defini comme propriete static de la classe Page. 

Ainsi, la premiere fois qu'une page est creee, l'objet lesMinisRubriques est null, il se 
cree en memoire grace a l'operateur new. Ensuite, l'objet ne pourra plus jamais etre 
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cree, puisque etant static : il garde en memoire la reference sur l'objet cree la 
premiere fois. 



Remarque 

Lorsque I'internaute clique sur le titre Mini Site, la page en cours d'affichage estsupprimee. La propriete 
lesMinisRubriques reste pourtant non null. L'affichage d'une nouvelle page n'entralne pas ensuite 
I'affichage des mini rubriques. Pour corriger ce defaut d'affichage, il convientde « forcer » I 'in itia I isation 
de la propriete lesMinisRubriques a null, dans la fonction supprimerLesPages ( ) de la classe 
Mini Site. 



Construction des mini rubriques 

La classe LesMinis possede deux proprietes nominees listeForme et listeTitre de type 
Array. Ces proprietes sont initialisers au sein du constructeur LesMinisO. Ecrivez les 
instructions le composant, en observant que : 

• Les proprietes listeForme et listeTitre contiennent la liste des formes et des titres 
correspondant aux rubriques creees. Les elements du tableau sont initialises a l'aide 
des constructeurs des classes Forme et TitreTexte. 

• Le nombre d'elements du tableau est obtenu a l'aide de la propriete stati c 1 i steNoms de 
la classe MinSite. 

• Chaque forme est placee a partir de sa position finale et de la place qu'elle occupe dans 
le tableau. 

• Le titre des mini rubriques n'est affiche que lorsque la souris survole un element du 
tableau. L'affichage du texte utilise la methode dessinerHorizontal ( ) de la classe 
TitreTexte. 

Afh'cher les mini rubriques 

L'affichage des mini rubriques n'est realise que lorsque l'affichage de la page est 
termine. Cet affichage est realise par 1' intermediate de la methode affi cherLesMini s( ). 

Ecrivez, dans la classe LesMinis, la methode afficherLesMinis( ) en remarquant que : 

• Lorsque les mini rubriques s'affichent, celle correspondant a la page selectionnee n'est 
pas affichee. Le numero de la mini rubrique invisible doit etre passe en parametre de la 
methode. 

• La methode parcourt le tableau listeForme. Elle ajoute ensuite chaque element du 
tableau a la liste d'affichage et le rend visible. Une fois la liste parcourue, la methode 
rend invisible l'element correspondant au numero passe en parametre. 

Cliquer sur une mini rubrique 

Le gestionnaire MouseEvent.MOUSE_UP est defini lorsque la liste des mini rubriques est 
creee. L action a mener est cl icSurMini ( ). 

La methode cl i cSurMi ni ( ) realise plusieurs actions qui sont, en grande partie, identiques 
a celles decrites par la methode cl icSurRubrique( ) definie par la classe Rubrique. 
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• Ecrivez la methode cl icSurMini ( ) en vous inspirant de la methode cl icSurRubrique( ). 

• Ajoutez le gestionnaire MouseEvent . MOUSE JP pour chaque element du tableau. 

• Avant de faire apparaitre une nouvelle page, supprimez la precedente a l'aide d'une 
fonction que vous nommerez supprimerl_esPages( ). Cette fonction parcourt la liste 
d'affichage du parent et supprime les enfants de type Forme et TitreTexte, la premiere 
fois qu'une page est affichee. Elle supprime ensuite les enfants de type Page. 
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Au cours de ce chapitre, nous examinerons plus particulierement les techniques d' impor- 
tation et de manipulation des donnees en cours d' execution d'une animation Flash. 

Le langage ActionScript est dote d'outils puissants et relativement simples pour lire des 
informations enregistrees dans des fichiers externes a 1' application. Ces informations 
peuvent se presenter sous differentes formes, par exemple, le son, la video ou le texte. 

Au cours de la section « Le son », nous etudierons comment traiter le son associe a un 
evenement et comment charger une musique en flux continu (streaming). 

Ensuite, a la section « La video », nous examinerons et analyserons les differentes etapes 
a realiser pour importer un flux video « a la volee ». 

Pour finir, a la section « Le texte », nous developperons toutes les techniques d'importa- 
tion de l'information textuelle, qu'il s'agisse d'un simple texte ou d'une information 
enregistree sous la forme d'une paire « variable-donnee ». Pour cela, nous traiterons des 
differents formats de fichier et plus particulierement le format XML. 

Le son 

L'integration du son avec ActionScript est aussi simple que le chargement d'une image. 
Le langage fournit toute une gamme d'outils permettant la lecture d'un son, qu'il soit 
associe a un evenement precis ou lu en flux continu (streaming). L'integration de sons 
s'effectue par 1' intermediate des classes Sound et SoundChannel. 

Les classes Sound et SoundChannel 

La classe Sound est une classe native du langage ActionScript. Elle est plus particuliere- 
ment utilisee pour importer et charger des sons en cours d'execution. Les outils de la 
classe SoundChannel offrent, quant a eux, la possibilite de piloter le curseur de lecture du 
son et de controler le volume sonore. 
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Ces deux classes sont composees de proprietes et de methodes. Nous presentons dans les 
sections suivantes les methodes, les proprietes et les gestionnaires d'evenements les plus 
utilises. 

Les methodes des classes Sound et SoundChannel 



Tableau 10-1 Les methodes de la classe Sound 



Methodes 


Operation 


Sound( ) 


Constructed de la classe, il retourne I'adresse d'un objet sur lequel pourront 
s'appliquer les methodes decrites ci-apres. 


loadturl ) 


Charge le fichier MP3 specfie en parametre, dans I'objet Sound sur lequel est 
appliquee la methode. 


playtdebut. boucle) 


Lit le son associe depuis le debut si aucun parametre n'est specifie, ou en com- 
mencant a I'endroit precise par le parametre debut. Le parametre boucl e est 
une valeur numerique optionnelle qui determine combien de fois le son doit etre 
repete. La methode cree un objet SoundChannel pour lire le son. 


cl ose( ) 


Ferme le flux etstoppe le telechargementdes donnees. 


Tableau 10-2 Les methodes de la classe SoundChannel 


Methodes 


Operation 


SoundChannel ( ) 


Cree un canal de lecture du son. Le canal est associe au son a I'aide de la 
methode pi ay( ) decrite dans la classe Sound, 


stop( ) 


Arrete la lecture du son dans le canal. 



Nous presentons ici des exemples tres simples afin d' observer la facon dont on utilise les 
objets des classes Sound et SoundChannel. Deux exemples plus demonstratifs sont etudies 
aux sections « Associer un son a un evenement » et « Un lecteur MP3 ». 

Exemple 

//© Creer un objet de type Sound 

var music:Sound = new SoundO; 

//© Creer un canal de lecture du son 

var canal :SoundChannel = new SoundChannel () ; 

//© Charger le fichier LaMusique.mp3 

music.l oad(new URLRequestt "Sons/1 aMusique.mp3" ) ) ; ; 

//© Lancer la lecture du morceau de musique et 1 'associer au canal 

canal = music.pl ay( ) ; 

© Un objet musi c de type Sound est cree a I'aide du constructeur SoundO. 

© Un objet canal de type SoundChannel est cree a I'aide du constructeur SoundChannel ( ). 

© La methode loadO charge le fichier Sons/LaMusique.mp3 dans I'objet music. La 
methode loadO demande en parametres le chemin d'acces ainsi que le nom du 
fichier a charger. La validite du chemin ainsi que le controle de 1' existence du fichier 
sont verifies grace au constructeur URLRequest( ). 

© La methode pi ay ( ) lance la lecture chargee dans I'objet musi c et l'associe au canal de 
lecture 
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Tableau 10-3 Les proprietes des classes Sound et SoundChannel 



Proprietes 


Operation 


1 ength 


Pour connaitre la duree d'un son (classe Sound). 


bytes Loaded 


Correspond au nombre d'octets disponibles en cours de chargement (classe Sound). 


bytesTotal 


Correspond au nombre total d'octets que contient I'objet sur lequel est applique la 
propriete (classe Sound). 


position 


Position actuelle de la tete de lecture dans le son (classe SoundChannel ). 


soundTransform 


Pour modifier le volume sonore ainsi que la balance (classe SoundChannel ) 



Exemple 

L' expression suivante : 

canal .position / music. length 

est utilisee pour calculer le temps d'ecoute par rapport a la duree totale du fichier son. Ce 
calcul est utilise plus loin dans cette section, pour afficher la barre de progression de 
lecture d'un fichier MP3. 

Le resultat de cette expression n'est vraiment precis que si les donnees audio sont totale- 
ment chargees avant le debut de la lecture. En effet, la propriete music. length indique la 
taille des donnees audio actuellement chargees, et non pas la taille eventuelle du fichier 
audio entier. Pour suivre la progression de la lecture d'un son diffuse alors qu'il est en 
cours de chargement, nous devons estimer la taille eventuelle du fichier audio entier. 
Cette estimation est realisee par le calcul suivant : 

estimation = music. length / (music. bytesLoaded / musi c. bytesTotal ) 

Le calcul du temps d'ecoute par rapport a la duree du morceau est alors obtenu par 
1' expression : 

canal .position / estimation 

Les evenements des classes Sound et SoundChannel 



Tableau 10-4 Les evenements des classes Sound et SoundChannel 



Gestionnaire d'evenements 


Operation 


Event. COMPLETE 


L'evenement Event. COMPLETE est emis lorsque le fichier son a ete totale- 
menttelecharge (classe Sound). 


Event. ID3 


L'evenement Event. ID3 est utilise pour recuperer des informations telles 
que le nom de I'artiste, le titre du morceau ou encore I'annee d'enregistrement 
(classe Sound). 


Event. S0UND_C0MPLETE 


L'evenement Event. S0UND_C0MPLETE est emis automatiquement lorsque 

la lecture d'un son estterminee (classe SoundChannel ). 





Exemple 

mus ic.addEvent Li stenert Event . ID3, quel ID3) ; 
function quel ID3(e: Event) :void { 
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fort var propriete in music. id3 ){ 
tracet propriete + " : "+ music. id3[propriete] ); 

} 

} 

Au chargement du fichier MP3 a l'aide des methodes 1 oad( ), le gestionnaire d'evenement 
Event. I D3 receptionne les metadonnees faisant partie d'un fichier MP3, lorsqu'elles 
existent. 

La boucle for_1n, placee a l'interieur du gestionnaire, afhche l'integralite de ces donnees 
dans la fenetre de sortie. 

Associer un son a un evenement 

Les sons associes a un evenement (clic de souris, apparition d'un nouvel objet...) sont 
des sons tres courts qui ne pesent que quelques kilo-octets (entre 10 et 30 Ko). II est 
done tout a fait possible de les integrer directement dans le fichier source (fichier 
d'extension . f 1 a). 

Examinons comment realiser cette integration en reprenant l'exemple de la photo 
interactive. 

ds= Pour en savoir plus 

La classe Personne est etudiee a la section « Une personne se presente avec sa photo » du chapitre 9, 
« Les principes du concept objet ». 

L'objectif de cet exemple est de faire en sorte que la photo emette un son en me me temps 
qu'elle affiche l'infobulle. L'exemple reprend le code de la classe Personne realisee au 
cours du chapitre precedent. 



Extension web 

Vous pourrez tester cet exemple en executant le fichier UnSonSurLaPhoto . f l a, sous le repertoire Exempl es/ 
chapitrelO. Les fichiers son se trouventdans le repertoire Exempl es/chapitrelO/Sons. 



La mise en place d'un son d'evenement s'effectue en trois temps : 

• importation du son dans la bibliotheque de 1' animation ; 

• creation d'un objet de type Sound ; 

• lecture du son au declenchement de l'evenement. 

Importer un son dans la bibliotheque 

L' import direct de sons (au format .mp3) dans la bibliotheque de 1' application s'effectue 
tres simplement, en : 

• Selectionnant l'item Importer - Importer dans la bibliotheque du menu Fichier de 
l'environnement Flash. 

• Choisissant le fichier au format .mp3 correspondant au son que vous souhaitez 
entendre dans la boite de dialogue Importer dans la bibliotheque. Vous pouvez, par 
exemple, selectionner le fichier son0.mp3 se trouvant dans le repertoire Exempl es/ 
chapitrelO/Sons. 
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Apres validation, l'element selectionne apparait dans la bibliotheque (tapezFll pour 
faire apparaitre le panneau Bibliotheque). 

Le symbole de type son doit etre visible pour le script qui va l'appeler. Pour cela, cliquez 
droit sur le symbole associe au son dans le panneau Bibliotheque et selectionnez l'item 
Liaison. 

La fenetre Panneau de Liaison apparait. Cochez la case Exporter pour ActionScript et 
entrez comme identifiant le nom sonO. 



Figure 10-1 

La fenetre Panneau de 
liaison s 'obtient en 
aliquant droit sur 
l'element sonO, place 
dans la bibliotheque. 



Proprletes de liaison 
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ET 
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Remarque 

Par defaut, Flash propose comme nom de liaison, le nom du fichier audio importe (son0.mp3). Si le nom 
du fichier contient un point, vous devez le remplacer par un nom ne contenant pas de point (sonO). 
ActionScript n'autorise pas le caractere point dans les noms de classe. 



Creer et lire le son au bon moment 

Lorsque la bulle apparait, un son est emis. L emission du son s'effectue lorsque l'evenement 
MouseEvent.MOUSEJVER est perfu par le clip associe a la photo. 

Dans la classe Personne, nous devons done inserer les lignes suivantes a l'interieur de la 
methode auSurvol ( ) : 

private function auSurvol (event:MouseEvent) :void { 
addChild(info); 

//O Creation d'un objet de type sonO 
var unSon:sonO = new sonOO: 
//© Le son est joue 
unSon.playO; 

} 

Au survol de la photo, un objet de type sonO est cree a l'aide de l'operateur new (O). Le 
type est directement lie au nom que vous avez choisi lors de 1' exportation du son pour 
ActionScript. Le son est ensuite lance grace a la methode pi ay ( ) appliquee a l'occurrence 
unSon (©). 



Un lecteur MP3 

II existe d'autres types de sons que ceux lies a un evenement, les sons d' ambiance ou 
encore la musique. Generalement, ces fichiers sont tres lourds, malgre la compression 
MP3. II n'est done pas conseille de les charger au sein meme de 1' application, celle-ci 
deviendrait trop lourde a telecharger. 
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La seule facon d'eviter les difficultes liees au poids des animations est de charger la 
musique en cours d'execution de 1' application. 



Remarque 

Lorsqu'un fichier, une image, un son ou une video n'est pas enregistre dans la bibliotheque du fichier 
source, mais est lu a partir d'un fichier exterieur a I'application et charge en cours d'execution, on dit que 
les donnees sontchargees « a la volee » . 



Examinons cette technique sur un exemple, le lecteur MP3. 
Extension web 

Vous pourrez tester cet exemple en executant le fichier LecteurMp3.fl a, sous le repertoire Exemples/ 
chapitrelO. Les fichiers son se trouventdans le repertoire Exemples/chapitrelO/Sons. 

Cahier des charges 

Le lecteur MP3 est dote de 3 boutons - 1 i re, f ai reUnePause et stopper (voir figure 10-2). 

• Le bouton 1 i re lance la lecture du fichier MP3. II disparait au premier clic pour laisser 
apparaitre le bouton faireUnePause. 

• Le bouton faireUnePause interrompt la lecture de la musique lorsque Ton clique 
dessus. Le bouton faireUnePause disparait, pour laisser apparaitre le bouton lire. 
Lorsque le bouton 1 i re est a nouveau enfonce, la lecture reprend son cours la oil 
elle s'etait arretee. 

• Le bouton stopper n'apparait qu'une fois la lecture de la musique lancee. Lorsque Ton 
clique dessus, la lecture de la musique s'arrete. Le bouton stopper est alors remplace 
par le bouton 1 i re. Lorsque ce dernier est a nouveau enfonce, la lecture reprend au tout 
debut du morceau. 

Le lecteur MP3 possede egalement : 

• un curseur permettant de monter ou de diminuer le volume sonore ; 

• une barre de progression, afin de visualiser le temps ecoule depuis le lancement de la 
lecture du morceau de musique. 

L'ensemble de l'interface - boutons, barre de progression, curseur de volume - est defini 
a l'interieur d'un symbole nomme Control eurCl p, comme le montre la figure 10-2. 




Figure 10-2 

Le symbole ControleurClp est compose de 6 symboles definissant l'interface utilisateur. 
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Une occurrence du symbole ControleurClp est creee a l'aide de l'operateur new, comme 
suit. Nous la nommons controleur : 



L'acces au bouton 1 i re est realise par l'expression control eur . 1 i re, l'acces au curseur par 
controleur. curseur. 

Charger un son a la volee 

Apres la creation des elements de 1' interface utilisateur, 1' operation suivante consiste a 
creer puis charger un son se trouvant sur le disque dur de votre machine (ou du serveur). 
Ces deux operations sont realisees par les instructions suivantes : 

var music:Sound = new SoundO; 

music. load (new URLRequest("Sons/laMusic.mp3") ) ; 

La premiere instruction cree un objet nomme musi c, de type Sound. La seconde instruction 
charge, dans l'objet music, le fichier fourni en parametre du constructeur de la classe 
URLRequest("Sons/l aMusi c.mp3"). 

Lancer la lecture 

La lecture de fichier MP3 debute lorsque l'utilisateur clique sur le bouton lire. Les 
instructions lancant la lecture de la musique se placent dans le gestionnaire d'evenement 
de l'objet control eur. lire comme suit : 

//© Definition du canal audio 

var canal :SoundChannel = new SoundChannel ( ) ; 

control eur. lire. add Event Li stener(MouseEvent.MOUSE_UP, pour Li re) ; 

function pourLire(e:MouseEvent):void { 

//© Lancer la lecture et 1'associer a un canal 

canal = music. play(sePoserOu); 

//Afficher les boutons fai reUnePause et stopper 

controleur. stopper. visible = true; 

controleur. f ai reUnePause. visible = true; 

//Effacer le bouton lire 

controleur. lire. visible = false; 

} 

La methode playO lance la musique chargee dans l'objet music a partir de la position 
enregistree dans la variable sePoserOu. 

La variable sePoserOu est initialisee a 0 au moment de sa declaration ; elle sera ensuite 
modifiee par le gestionnaire du bouton fai reUnePause decrit ci-apres. 

La premiere fois que l'utilisateur clique sur le bouton 1 i re, la musique est done jouee a 
partir du debut du fichier. II est possible d'ajouter un second parametre a la methode 
pi ay ( ) pour indiquer le nombre de fois ou la musique doit etre lancee. 

D: : r Pour en savoir plus 

La gestion de I'affichage des boutons, leur apparition et leur disparition sont traitees au chapitre 3, 
« Communiquer ou interagir », section « Exercice 3.4 ». 

Une fois lancee, la musique peut etre arretee momentanement ou definitivement. La 
gestion du curseur de lecture est realisee par 1' intermediate de la classe SoundChannel . 
En effet, chaque son lu dans une application Flash doit etre associe a un canal audio (O) 



I 



var controleur:ControleurClp = new Control eurCl p( ) ; 
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que Ton peut alors controler a l'aide de ses proprietes et methodes. L' association canal- 
son ne s'effectue reellement qu'au moment oil le son est joue (©). 

Faire une pause 

Le bouton fai reUnePause est utilise pour arreter la musique au moment oil l'utilisateur 
clique dessus. Le bouton lire remplace alors le bouton faireUnePause. La musique 
reprend son cours si l'utilisateur clique sur le bouton 1 i re. 

Le gestionnaire d'evenement de l'objet control eur. fai reUnePause s'ecrit comme suit : 

control eur. fai reUnePause. addEvent Li stener(MouseEvent.MOUSE_UP, pour Fai reUnePause) ; 
function pourFaireUnePause(e:MouseEvent):void { 

//© Recuperer la position du curseur de lecture 

sePoserOu= canal .position; 

//© Arreter la lecture 

canal . stop( ) ; 

controleur. faireUnePause. visible = false; 
controleur. lire. visible = true; 

} 

La position de la tete de lecture est enregistree (O) dans la variable globale sePoserOu au 
moment ou l'utilisateur clique sur le bouton faireUnePause. La valeur est recuperee a 
l'aide de la propriete position de l'objet canal initialise au moment du lancement de la 
lecture du morceau de musique. 

Ensuite, la lecture du fichier MP3 est stoppee (©). Les instructions suivantes ont pour 
role de remplacer le bouton fai reUnePause par le bouton 1 i re. 

La reprise de la lecture se fait obligatoirement par 1' intermediate du bouton 1 i re, le 
bouton fai reUnePause ayant disparu. 

La reprise de lecture du son s'effectue done depuis le gestionnaire MouseEvent.MOUSEJJP 
du bouton control eur. 1 ire a partir de la position enregistree dans la variable sePoserOu. 
Cette derniere est calculee d'apres la valeur enregistree dans la variable globale sePoserOu 
et qui vient d'etre modifiee par le gestionnaire MouseEvent.MOUSEJJP associe au bouton 
control eur .fai reUnePause. 

Cela fait, la musique reprend son cours a l'endroit ou l'utilisateur l'avait arretee en 
cliquant sur le bouton fai reUnePause. 

Arreter la musique 

Pour arreter la musique, deux methodes sont possibles : 

• Soit l'utilisateur clique de lui-meme sur le bouton stopper. Dans cette situation, le 
comportement de l'interface utilisateur est decrit par le gestionnaire d'evenement de 
l'objet controleur. stopper. 

• Soit la tete de lecture arrive a la fin du fichier MP3. Le comportement de l'interface 
utilisateur est decrit ici par le gestionnaire d'evenement Event. S0UND_C0MPLETE associe 
a l'objet canal. 

Observons cependant que, dans chacune des deux situations, le fonctionnement de 
l'interface utilisateur est identique : les deux boutons faireUnePause et stopper s'effacent 
et le bouton 1 i re reapparait. 
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C'est pourquoi nous rassemblons l'ensemble des instructions realisant ces actions au sein 
de la fonction remiseAZero( ) comme suit : 

function remiseAZero( ) :void { 
sePoserOu = 0; 
//Afficher le bouton lire 
controleur. lire. visible = true; 
//Effacer les deux autres boutons 
controleur. fai reUnePause. visible = false; 
controleur. stopper. vi si ble=false; 
canal .stop( ) ; 

} 

En reinitialisant la variable sePoser a 0, nous nous assurons de la reprise de la lecture de 
la musique au debut du morceau, lorsque l'utilisateur cliquera a nouveau sur le bouton 
1 i re. 

Les deux gestionnaires Event. S0UND_C0MPLETE et MouseEvent.MOUSEJJP associes aux objets 
control eur. stopper, et canal font ensuite appel a la methode remi seAZero( ) comme suit : 

canal .addEventListener(Event.SOUND_COMPLETE, auSonLu) ; 
function auSonLu(e:Event) :void { 
remiseAZero( ) ; 

} 

control eur. stopper. addEvent Listener (MouseEvent.MOUSE_UP, pourStopper) ; 
function pourStopper(e:MouseEvent) :void { 
remiseAZero( ) ; 

} 



Remarque 

L'ajout de I'ecouteur sur I'objet canal associe a I'evenement Event. sound„complete doit etre realise 
juste apres I'initialisation du canal, au sein de la methode pourl_ire( ). 

Changer le volume 

L' augmentation ou la diminution du volume sonore s'effectue par 1' intermediate de 
l'occurrence curseur, definie a l'interieur du symbole Control eurCl p. 

Les instructions realisant 1' association deplacement du curseur-changement du volume 
sonore sont les suivantes : 

//© Definition des positions initiales 
var initX: Number = controleur. niveau. x; 
var initY:Number = controleur. niveau. y; 
var longueur: Number = controleur. niveau. width; 

//© Definition du volume sonore 

var changeVol ume:SoundTransform = new SoundTransformd , 0); 
var vol umeSon: Number = changeVol ume. volume; 

//Positionner le curseur du volume en fonction du volume sonore du fichier MP3 
controleur. curseur. x = initX + longueur * volumeSon 

- controleur. curseur. width; 
controleur. curseur. y = initY ; 

//© Gestion du deplacement du curseur 

control eur. curseur. add Event Li stener(MouseEvent.MOUSE_DOWN, auPress) ; 
function auPress(e:MouseEvent) :void { 
var zoneDeplacement: Rectangle = new RectangletinitX, initY, 

longueur - controleur. curseur. width, 0); 
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control eur. curseur. start Drag (false, zoneDepl acement) ; 
control eur .curseur .gotoAndStop( "cl ique" ) ; 

//© Lorsque la souris se deplace, calculer le volume 

control eur. curseur. addEvent Li stener(MouseEvent.MOUSE_MOVE, a uDepl acement) ; 

} 

function auDeplacement(e:MouseEvent):void { 
volumeSon = (controleur. curseur. x - initX)/longueur; 
changeVol ume.vol ume = volumeSon; 
canal .soundTransform = changeVol ume; 

} 

//© Quand l'utilisateur relache le bouton de la souris 

control eur. curseur. add Event Li stenertMouseEvent .MOUSEJP, auRelachement) ; 

stage, add Event Li stenertMouseEvent .MOUSEJP, auRelachement) ; 

function auRelachement(e:MouseEvent):void { 

control eur .curseur .gotoAndStop( "normal " ) ; 

control eur.curseur .stopDrag( ) ; 

remove Event Li stener(MouseEvent .M0USE_M0VE, auDepl acement) ; 

} 

//© Modifier l'apparence du curseur du volume 

control eur .curseur .add Event Li s tenert Mouse Event .M0USE_0VER, auSurvol ) ; 
function auSurvol (e:MouseEvent) :void { 
control eur. curseur. gotoAndStop( "survol ") ; 

} 

controleur. curseur. addEventListener(MouseEvent.MOUSE_OUT, al Exterieur) ; 
function al Exterieur(e:MouseEvent) :void { 
control eur. curseur. gotoAndStop( "normal ") ; 

} 

O Les variables initX, initY et 1 ongueur sont utilisees pour definir l'espace de deplace- 
ment du curseur. La variable longueur intervient egalement dans le calcul du volume 
sonore (voir ©). 

© Pour recuperer le volume sonore d'un fichier MP3, nous devons utiliser la classe 
SoundTransform. Cette classe contient des proprietes relatives au volume et a la 
balance horizontale d'un son. Les parametres du constructeur SoundTransform(0,l) 
correspondent a un volume sonore maximal (1) et une balance centree (0). Ces 
valeurs sont enregistrees dans un objet nomme vol umeSon . Le volume du son corres- 
pondant au volume sonore avant toute intervention sur le curseur est recupere par 
l'intermediaire de la propriete volume de l'objet volumeSon. Grace a cette valeur, le 
curseur control eur. curseur est place au niveau sonore correspondant au volume 
defini au moment du lancement de 1' application. 

© Lorsque l'utilisateur clique sur le curseur, ce dernier se deplace uniquement sur l'axe 
des X, entre initX et initx+longueur. Le deplacement sur l'axe des Y est nul (0). Le 
curseur est place en i ni tY. 

0 La modification du volume sonore est realisee par l'intermediaire de la propriete 
vol ume de l'objet vol umeSon et la propriete soundTransform de l'objet canal . Un volume 
sonore egal a 0 correspond a un son coupe, un volume egal a 1 a un son maximal. 

L association curseur- volume est realisee en calculant la position du curseur (occurrence 
control eur. curseur) par rapport a labarre de niveau (occurrence control eur. niveau). Si le 
curseur est place a l'origine du niveau, le volume vaut 0, s'il est situe a l'extremite droite 
du niveau (control eur. niveau. width), le son vaut 1. Cette valeur est obtenue en calculant 
1' expression : 

positionCouranteDuCurseur / longueurDuNiveau 
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La position courante du curseur est obtenue par 1' intermediate du gestionnaire d'evene- 
ment MouseEvent.MOUSE„MOvE sur le curseur. Ainsi, la valeur controleur. curseur. x au sein 
de Taction auDepl acement( ) correspond a la position courante du curseur. 

Apres calcul, le volume sonore est modifie en initialisant tout d'abord la propriete vol ume 
de l'objet vol umeSon a la valeur calculee al'aide de l'expression positionCouranteDuCurseur/ 
longueurDuNiveau puis en modifiant la propriete soundTransform de l'objet canal. 

© Lorsque le bouton de la souris est relache, le curseur ne se deplace plus. Ainsi, 1' ins- 
truction stopDrag( ) interrompt son deplacement. Le bouton de la souris peut etre rela- 
che a tout moment, que le pointeur de la souris soit sur le curseur de volume ou en 
dehors. C'est pourquoi, la detection de l'evenement MouseEvent.MOUSEJJP est realisee 
a la fois par l'objet controleur. curseur et par la scene (stage) sur lequel se trouve le 
control eur. 



Remarque 

La methode removeEventl_istener( ) detruit le gestionnaire d'evenement MouseEvent.MOUSE_MOVE 
afin d'eviterde surcharger inutilement le lecteur Flash. 



0 Le curseur control eur. curseur n'est pas de type Bouton mais de type Clip. En effet, 
seul un clip peut etre deplace avec la methode startDragO. Pour modifier l'apparence 
du curseur en fonction de la position de la souris, nous devons definir les gestionnai- 
res MouseEvent.MOUSEJVER et MouseEvent.MOUSEJJUT de l'objet controleur. curseur afin 
d'indiquer quelle image du clip afficher. Ce dernier possede 3 images nominees normal, 
survol et clique. L'image cl ique est utilisee dans le gestionnaire MouseEvent.MOUSE_DOWN. 

Voir la lecture progresser 

Afin de rendre ce modeste lecteur MP3 un peu plus convivial, nous ajoutons une barre de 
progression qui indique le temps d'ecoute. Une ligne rouge nommee bulleProgress voit 
sa taille (longueur) augmenter au fur et a mesure que la musique est ecoutee. 

control eur. bul 1 eProgress .addEventLi stenert Event . ENTER_FRAME, barreProgresse) ; 
function barreProgresse(e:Event) :void { 
var longueurEstimeeiint = 

Math. ceil (music. length 
/ (music. bytesLoaded / music. bytesTotal )) ; 
controleur. bulleProgress. scaleX = canal .position / longueurEstimee; 

} 

La mise en place de la barre de progression s'effectue tres simplement, en calculant le 
temps d'ecoute par rapport a la duree estimee du morceau de musique. Cette valeur est 
obtenue (comme nous l'avons vu en section precedente) par l'expression : 

canal .position / longueurEstimee 

L'effet de progression dans le temps est obtenu en augmentant la dimension horizontale 
de la ligne, grace a la propriete seal eX. La valeur de changement d'echelle correspond au 
temps d'ecoute par rapport a la duree totale du morceau. 

Pour visualiser le changement d'echelle de l'occurrence bulleProgress, nous devons 
inserer ce calcul a l'interieur du gestionnaire d'evenement Event . ENTER_FRAME. Ce dernier 
n'est appele que lorsque le morceau de musique est joue, e'est-a-dire quand l'utili- 
sateur a clique sur le bouton control eur. lire. L'ajout du gestionnaire d'evenement 
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Event. ENTEFLFRAME est done a placer a l'interieur du gestionnaire MouseEvent.MOUSE_UP de 
l'objet control eur.l ire. 

Lorsque la musique cesse d'etre jouee, soit parce que la fin du morceau est atteinte, soit 
parce que l'utilisateur a clique sur le bouton stopper ou fai reUnePause, la barre de 
progression doit cesser d'avancer. 

Pour chacun de ces cas, nous devons detruire le gestionnaire d'evenement Event . ENTER_ 
FRAME en utilisant l'instruction : 

if ( controleur.bulleProgress != null) 
removeEventl_istener(Event. ENTER_FRAME, barreProgresse) ; 

Cette instruction est placee dans la fonction remi seAZero( ). 

Lorsque le morceau de musique arrive a sa fin ou s'il est arrete parce que l'utilisateur a 
clique sur le bouton stopper, la barre de progression doit revenir a sa position initiale. 

Pour cela, nous devons placer l'instruction : 

controleur.bulleProgress. scaleX = 0.01; 

a l'interieur de la fonction remi seAZero ( ) arm de rendre la ligne si petite qu'elle en devient 
invisible. 

La video 

Avec le progres des nouvelles technologies et l'acces simplifie a un reseau Internet haut 
debit, l'utilisation de videos au sein de pages web devient de plus en plus courante. 

Depuis la version Flash MX, Flash propose un format et une compression optimale pour 
charger des videos de tres bonne qualite que Ton peut visionner en flux continu. 

L'importation d'une video consiste tout d'abord a transformer des fichiers aux formats 
divers (.mov, .mpeg ou .avi) en fichiers au format .flv - Flash Video (voir section « Integrer 
la video dans Flash »). 

Ensuite, lorsque ces derniers sont prets a l'emploi, ils sont charges dans une application 
qui les controle et qui communique avec eux. Ces operations sont realisees par l'interme- 
diaire de classes telles que les classes NetConnection et NetStream (voir section « Manipuler 
un flux video a la volee »). 

Integrer la video dans Flash 

Le format . f 1 v est utilise par Flash pour integrer un flux video au sein d'une animation 
Flash. 

Si votre video est au format .avi ou .mpeg, vous devez le convertir en utilisant l'assistant 
de codage propose par l'environnement Flash. 

Creer un fichier FLV 

Voici la demarche a suivre pour obtenir un fichier au format .flv: 

1. Dans le menu Fichier, cliquez sur l'item Importer - Importer de la video, puis selec- 
tionnez le fichier video (au format .avi) dans la boite de dialogue Importer de la 
video (voir figure 10-3). Cliquez sur le bouton Sui vant. 
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Figure 10-3 

Selection dufichier 
video 



Selectionner le tichier video 
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2. Pour visionner une video enregistree sur votre disque dur, selectionnez la ligne Diffusion 
en continu avec le service FVSS, comme le montre la figure 10-4. 



Figure 10-4 

Choix du mode de 
diffusion de la video 



Deployment 
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3. Apres validation, le panneau suivant (voir figure 10-5) est utilise pour definir le type 
de codage, la qualite, le lecteur Flash... Vous pouvez egalement recadrer votre video, 
definir des points de repere afin d'obtenir une meilleure interactivite. . . 



Figure 10-5 

Definition du codage 
et de la qualite de la 
video 



Codage 
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4. Apres validation, le panneau suivant (voir figure 10-6) est utilise pour definir 
1' interface utilisateur dans laquelle sera visionnee la video. Pour des raisons peda- 
gogiques, nous choisissons de ne pas prendre d'habillage (voir section « Un lecteur 
de video »). 



Figure 10-6 . . j i w ^» 

Rehabillage 

Aucun habillage 



n 'est ehoisipour lire 
la video. 





5. Le panneau suivant (voir figure 10-7) presente un recapitulatif des options de codage. 
II indique notamment a partir de quel fichier le codage est effectue et quel sera le 
fichier final obtenu (fichier d'extension .flv). Le fichier Flash Video est enregistre 
dans le repertoire courant de 1' application utilisee pour coder la video. 



Figure 10-7 

Tableau recapitulatif 
avant codage 



Terminer I'importation de videos 




6. Apres avoir clique sur le bouton Termi ne, le lecteur Flash affiche une fenetre indiquant 
le temps et la progression du codage ainsi que les noms des fichiers source et de 
sortie. 



Figure 10-8 

Etat de progression 
du codage 
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Cette derniere etape realisee, vous obtenez dans la bibliofheque de votre application un 
clip compile nomme FLVPlayBack ainsi qu'une occurrence de ce clip sur la scene. Vous 
pouvez deplacer et modifier la taille de cette occurrence avec les outils proposes par 
P interface de Flash. 

A la suite de cette operation, Pencodeur video de Flash a egalement cree et enregistre un 
fichier au format .fl v dans le meme repertoire que celui oil se trouve votre application. 

Manipuler un flux video a la volee 

Lorsque le fichier au format .flv est pret a Pemploi, Pobjectif n'est pas de Pintegrer 
directement dans le fichier . f 1 a, mais de le charger dynamiquement dans une animation. 

La lecture des fichiers . f 1 v a la volee offre plusieurs avantages par rapport a P integration 
d'une video dans un document Flash. Le poids du document est tres faible et Paffichage 
ainsi que la gestion de la memoire sont plus performants. De plus, les deux cadences 
d'affichage - video et animation Flash - deviennent independantes. 

Le moyen le plus direct pour visualiser et controler la lecture d'un fichier .flv est d'utiliser 
les classes NetConnection et NetStream via un objet de type Video. 



Remarque 

Flash propose toute une gamme de composants qui simplifient la gestion de la video (voir la classe 
flvpi ayBack dans I'aide en ligne par exemple). Ces composants ont ete ecrits pour eviter aux concep- 
teurs graphiques d'avoir a programmer. Notre objectif etant ici d'apprendre a programmer, nous choisissons 
de ne pas les utiliser. 



La classe NetConnection 

La classe NetConnection permet d'acceder aux fichiers .flv en flux continu, stockes sur 
votre disque dur ou sur un serveur autorisant la gestion de flux video en streaming. 

La classe NetConnecti on offre pour cela un constructeur et la methode connectt ). 

• Le constructeur NetConnection( ) cree un objet NetConnection qu'il convient d'utiliser 
avec un objet NetStream (voir section « La classe NetStream » ci-apres). L'appel du 
constructeur s'ecrit comme suit : 

var seConnecter:NetConnection = new NetConnectionO: 

• La methode connectt ) ouvre une connexion locale lorsque la valeur passee en para- 
metre vaut nul 1 . Elle s'applique a un objet de type NetConnection, comme suit : 

seConnecter.connect(null ); 

La classe NetStream 

La classe NetStream fournit des methodes et des proprietes afin de charger et de lire des 
fichiers .flv. Elle offre aussi la possibilite de suivre la progression du chargement du 
fichier et d'en controler sa lecture (arret, pause, etc.). 
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Les methodes de la classe NetStream les plus utilisees sont : 



Tableau 10-5 Les methodes les plus utilisees de la classe NetStream 



Methodes 


Operation 


Net St ream ( connect i on : NetConnecti on) 


Constructeurde la classe, il retourne I'adresse d'un objet sur lequel 
pourront s'appliquer les methodes decrites ci-apres. L'objet cree 
est un flux de diffusion en continu qui permet de lire des 
fichiers . fl v a I'aide de l'objet NetConnecti on specifie en para- 
metre. 


pause(booleen) 


Lors du premier appel de la methode (sans parametre), la lecture 
est interrompue. A I'appel suivant, la lecture reprend. 


pi ay(nom) 


Commence la lecture du fichier dont I'URL est passee en parame- 
tre. L'affichage des donnees s'effectue par I'intermediaire d'un objet 
Video. 


seek(offset) 


Recherche I'image-cle la plus proche du nombre de secondes 
pecifie (offset) a partir du debut du flux. 



Ainsi, par exemple, la creation d'un flux video s'effectue par I'intermediaire des instructions 
suivantes : 

var seConnecter:NetConnection = new NetConnection( ) ; 
seConnecter.connect(null ); 

var unFl ux: NetStream = new NetStream(seConnecter) ; 
Les proprietes de la classe NetStream les plus utilisees sont : 



Tableau 10-6 Les proprietes les plus utilisees de la classe NetStream 



Proprietes 


Operation 


buf ferLength 


Nombre de secondes de donnees enregistrees dans la memoire tampon. 


bytes Loaded 


Nombre d'octets de donnees ayantete charges dans le lecteur. 


bytesTotal 


Taille totale, en octets, du fichier charge dans le lecteur. 


time 


Position de la tete de lecture, en secondes. 



L' expression suivante : 

unFlux.bytesLoaded * 100 / unFl ux. bytesTotal 

calcule le pourcentage d'octets charges dans le lecteur par rapport au nombre total 
d'octets contenus dans le fichier. Ce calcul est utilise pour afhcher une barre de progression 
du chargement d'un fichier video. 

L'evenement le plus utilise de la classe NetStream est NetStatusEvent.NET_STATUS. Cet 
evenement est appele a chaque changement d'etat ou chaque fois qu'une erreur est emise 
pour l'objet NetStream. 

L'evenement NetStatusEvent.NET_STATUS est utilise, par exemple, pour detecter la fin de 
lecture d'une video. La demarche est la suivante : 

//Definition du gestionnaire d'evenement 

unFl ux. add Event Li stener(NetStatusEvent.NET_STATUS, quel Status) ; 

//Action a mener a reception de l'evenement 
function quelStatus(e:NetStatusEvent):void { 

//Affichage des informations concernant l'etat du flux 
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trace(e. info. code) 

//Si la lecture de la video est terminee 
if (e. info. code == "NetStream. Play. Stop") { 

//Revenir au point de depart 
unFlux.seek(depart) ; 
//Mettre en pause le flux 
unFl ux.pause( ) ; 

} 

} 

Lorsqu'une video est en cours de lecture, un certain nombre d'evenements est emis 
concernant l'etat de la lecture de la video. Ainsi, la constante NetStream. Buffer. Empty 
indique que les donnees ne sont pas recues suffisamment rapidement pour commencer la 
lecture. Le flux de donnees est interrompu tant que la memoire tampon n'est pas rechar- 
gee. Une fois l'operation terminee, un message NetStream. Buffer. Ful 1 est envoye et la 
lecture du flux continu reprend. La constante NetStream. Buffer. Stop precise quant a elle 
que la lecture de la video s'est arretee. 

La classe Video 

Une fois charge, le flux video ne peut etre visualise qu'au travers d'un objet de type Vi deo 
que Ton cree de la facon suivante : 

var laVideo:Video = new VideoO; 
1 aVideo.attachNetStream(unFl ux) ; 
laVideo.x = positionEnX ; 
laVideo.y = positionEnY ; 
addChild(laVideo); 

Un objet laVideo de type Video est cree a l'aide de l'operateur new. Le flux est associe a 
l'objet la Video en utilisant la methode attachNetStream( ). II est positionne sur la scene en 
initialisant les proprietes x et y de l'occurrence 1 aVideo aux valeurs souhaitees. 

Pour finir, raffichage de la video est realise en placant cette derniere dans la liste d'affi- 
chage avec addChi 1 d( ). 



Un lecteur de video 

Tout comme un morceau de musique s'ecoute, une video se regarde. Dans cet exemple, 
nous allons reprendre et modifier 1' interface utilisateur developpee pour le lecteur MP3 
afin de visualiser une video chargee en streaming. 



Extension web 

Vous pourrez tester cet exemple en executant le fichler LecteurVideo.fi a, sous le repertoire Exem- 
ples/chapitrelO. Les fichiers video sont places dans le repertoire Exemples/chapitrelO/Videos. 

Cahier des charges 

L'interface utilisateur fonctionne comme pour le lecteur MP3. 

• Le bouton control eur . 1 i re lance la lecture de la video. 

• Le bouton control eur. fai reUnePause arrete momentanement la lecture jusqu'a ce que 
1' utilisateur clique a nouveau sur le bouton 1 i re. 
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• Le bouton control eur . stopper arrete la lecture et replace la tete de lecture au debut de 



• L' occurrence control eur . curseur permet de modifier le volume sonore. 

• La barre de progression control eur. barreProgress visualise le temps de lecture par 
rapport a la duree totale du film. 

ds= Pour en savoir plus 

L'objet control eur est decrit plus precisementa la section precedente, « Un lecteur MP3 ». 

La seule difference reside dans l'ajout d'un ecran arm de pouvoir visualiser les videos 
(voir figure 10-9). 



Charger une video a la volee 

Pour charger une video dynamiquement, nous devons tout d'abord creer un flux video 
afin de relier la lecture du fichier video avec l'objet de visualisation. Cette operation est 
realisee grace aux instructions suivantes : 

var depart :Number=0; 

//© Creer une connexion 

var seConnecter:NetConnection = new NetConnection( ) ; 
seConnecter. connect (nul 1 ) ; 

//© Creer un flux 

var unFl ux: NetStream = new NetStream(seConnecter) ; 
//© Lancer et interrompre la lecture du flux 
unFl ux.pl ay( "Videos/PoissonJour .f 1 v" ) ; 
unFl ux.pause( ) ; 

© Le constructeur NetConnection( ) cree l'objet seConnecter. La connexion est etablie par 
la methode connect ( ) qui ouvre une connexion locale permettant de lire les fichiers a 
partir d'une adresse HTTP fournie en parametre, ou a partir du systeme local de 
fichiers, si le parametre vaut null. 



Remarque 

Pour obtenir une connexion vers un flux video sur une adresse HTTP, vous devez avant tout verifier si le 
site I'autorise. 



la video. 



Figure 10-9 




Un objet Video 
nomme ecran est 
ajoute au controleur. 
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© La mise en place du flux s'effectue par 1' intermediate d'un objet de type NetStream, 
construit a partir de l'objet seConnecter. 

© Une fois la connexion realisee, nous lancons la lecture du flux avec la methode 
play( ) pour l'interrompre immediatement apres avec la methode pause( ). La reprise 
de la lecture s'effectue ensuite lorsque l'utilisateur clique sur le bouton de lecture du 
controleur. 

Creer un ecran video 

Pour visualiser le flux charge a l'etape precedente, il convient de definir une zone de 
visualisation a l'aide de la classe Video. 

Lajout d'un ecran video au clip control eurClp, s'effectue tres simplement a l'aide des 
instructions suivantes : 

//© Definir un support pour visualiser la video 

var ecramVideo = new VideoO; 

//© Associer le flux a l'ecran 

ecran. attachNetStream(unFlux) ; 

//© Positionner l'ecran sur la scene 

ecran. x = -controleur. width/3 + ecart; 

ecran. y = -controleur. height/3 + ecart; 

//© Placer l'ecran a 1'interieur du controleur 

control eur.addChild(ecran) ; 

L'objet ecran (©) de type Video est utilise pour visualiser le flux auquel il est associe, 
grace a la methode (©) attachNetStream( ). Apres avoir positionne correctement l'occur- 
rence ecran (©), cette derniere est ajoutee a la liste d'affichage du control eur (©) a l'aide 
de la methode addChi 1 d( ). 

Toutes les manipulations du flux video sont effectuees par la suite sur l'objet unFl ux. 
Lancer la lecture 

La connexion etablie, le flux est relie a un objet Video, mais ce n'est pas pour autant que 
nous visualisons la video ! 

Pour cela, nous devons lancer la lecture du fichier en cliquant sur le bouton control eur . 1 i re. 
Le gestionnaire d'evenement du bouton s'ecrit : 

controleur. 1 i re. add Event Li stener(MouseEvent .CLICK, pour Li re) ; 
function pourLi re(e:MouseEvent) :void ( 

controleur. stopper. visible = true; 

controleur. faireUnePause. visible = true; 

controleur. lire. visible = false; 

unFlux.resumeO; 

controleur . bul 1 eProgress . add Event Listener (Event. ENTER_FRAME, barreProgresse) ; 

} 

La methode resumeO reprend la lecture du flux video mis en pause (ici Videos/ 
poissoJour.fi v) des son chargement. La methode resume ( ) est appliquee a l'objet unFlux, 
ce qui permet d'envoyer les donnees contenues dans le fichier vers le flux video qui lui- 
meme est attache a l'objet de visualisation control eur. ecran. 
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Faire une pause 

Lorsque l'utilisateur clique sur le bouton faireUnePause, la lecture du fichier s'arrete au 
moment du clic. Le bouton 1 i re remplace le bouton fa i reUnePause. La lecture de la video 
reprend son cours si l'utilisateur clique a nouveau sur le bouton 1 i re. 

Le gestionnaire de l'evenement control eur.fai reUnePause s'ecrit comme suit : 

//Le bouton Pause 

control eur.fai reUnePause. addEvent Li stener(MouseEvent.MOUSE_UP, pour Fa i reUnePause) ; 
function pourFaireUnePause(e:MouseEvent):void { 
unFl ux.piuset ) ; 

controleur. lire. visible = true; 
controleur. faireUnePause. visible = false; 
cont roleur. stopper. visible=f a lse; 
controleur. stopper. visible = true; 

} 

La methode pause () interrompt la lecture d'un flux la premiere fois qu'elle est appelee. 
Au prochain appel, la lecture reprend son cours la ou elle s'etait arretee. 



Remarque 

Faire une pause surun flux video se traite d'une fagon totalement differente de faire une pause surun flux 
sonore. Ici, nous n'avons pas besoin de connaftre le temps ecoule depuis le debut de la lecture de la 
video. La methode pause( ) gere d'elle-meme la position courante de la tete de lecture. 



La reprise de la lecture du flux video est realisee par le bouton 1 i re grace a la methode 
resumeO qui fait en sorte que la video reprenne son cours a l'endroit oil l'utilisateur 
l'avait arretee en cliquant sur le bouton fan reUnePause. 

Arreter la lecture 

Tout comme pour la musique, il existe deux facons d' arreter la lecture d'une video : 

• Soit l'utilisateur clique de lui-meme sur le bouton stopper. Dans cette situation, le 
comportement de l'interface utilisateur est decrit par le gestionnaire d'evenement de 
l'objet controleur. stopper. 

• Soit la tete de lecture arrive a la fin du fichier video. Le comportement de l'interface 
utilisateur est decrit ici par le gestionnaire d'evenement NetStatusEvent.NET_STATUS. 

Observons cependant que, dans chacune de ces deux situations, le fonctionnement de 
l'interface utilisateur est identique : les deux boutons faireUnePause et stopper s'effacent 
et le bouton 1 i re reapparait. 

Nous avons done rassemble l'ensemble des instructions realisant ces operations au sein 
de la fonction remi seAZero( ) comme suit : 

function remi seAZero( ): void { 
unFlux.pauseO; 
unFl ux.seek(O) ; 

controleur. lire. visible = true; 
controleur. faireUnePause. visible = false; 
cont rol eur. s topper. visible=f a lse; 

} 
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La methode seek( ) a pour resultat de replacer la tete de lecture en debut de fichier, puisque 
0 est place en parametre de la methode. 

Les deux gestionnaires control eur. stopper, et NetStatusEvent.NET_STATUS font ensuite 
appel a la methode remi seAZero( ) comme suit : 

cont rol eur. stopper . add Event Listener (MouseEvent.MOUSE_UP, pourStopper) ; 
function pourStopper(e:MouseEvent) :void { 

//Revenir au point de depart et mettre en pause le flux 
remiseAZero( ) ; 

} 

unFl ux.addEventl_istener(NetStatusEvent.NET_STATUS, quelStatus) ; 
function quelStatus(e:NetStatusEvent) :void { 

//Si la lecture de la video est terminee 
if (e. info. code == "NetStream. Play. Stop") { 

//Revenir au point de depart et mettre en pause le flux 
remiseAZero( ) ; 

} 

} 

La detection de la fin du fichier video est realisee par le gestionnaire d'evenement 
NetStatusEvent.NET_STATUS. Les messages emis par le flux video sont accessibles par 
l'intermediaire de l'objet e passe en parametre de Taction quelStatusO. La propriete a 
examiner a pour nom 1 nf o . code. 

Lorsque le fichier est lu dans sa totalite, le code recu par le gestionnaire NetStatusEvent . NET_ 
STATUS est NetStream. Play .Stop. Ainsi, grace au test : 

if (e. info. code == "NetStream. Play. Stop") 

1' application lecteurVideo detecte d'elle-meme la fin du fichier. Elle replace alors la tete 
de lecture en debut de fichier et reinitialise 1' interface utilisateur. 

Changer le volume 

La gestion du volume sonore s'effectue par l'intermediaire de l'objet controleur.curseur. 

Les instructions realisant 1' association deplacement du curseur-changement du volume 
sonore sont identiques a celles utilisees par le lecteur MP3, seul l'objet sur lequel est 
applique le changement du volume sonore differe. Ce n'est plus ici l'objet canal mais 
unFl ux qui est implique dans la transformation. La methode qui associe deplacement du 
curseur et modification du volume sonore est la suivante : 

function auDeplacement(e:MouseEvent) :void { 
volumeSon = (controleur. curseur. x -initX)/longueur; 
changeVolume. volume = volumeSon; 
unFlux.soundTransform = changeVolume; 

} 

//Voir ensuite le code source du lecteur MP3 

La gestion du niveau sonore s'effectue ensuite comme pour le lecteur MP3 (voir section 
« Un lecteur MP3 », paragraphe « Changer le volume »). 

Voir la lecture progresser 

La mise en place de la barre de progression de la lecture s'effectue en calculant le temps 
de lecture par rapport a la duree totale de la video. Le temps de lecture en cours est 
obtenu par la propriete time de l'objet unFl ux. 
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Le temps total est, pour notre exemple, enregistre dans la variable tempsTotal. Cette 
derniere est une variable globale declaree et initialisee a une valeur moyenne des videos 
presentees en exemple. 

L'effet de progression dans le temps est obtenu en augmentant la dimension horizontale 
de la ligne, grace a la propriete seal eX de l'objet bul 1 eProgress comme suit : 

control eur. bul 1 eProgress. addEvent Li stener( Event. ENTER_FRAME, barreProgresse) ; 
function barreProgresse(e: Event) :void { 
controleur.bulleProgress.scaleX = unFl ux.time/tempsTotal ; 

} 

Pour visualiser le changement d'echelle de l'occurrence bull eProgress, le gestionnaire 
d'evenement Event. ENTER_FRAME n'est appele que lorsque la video est lue, e'est-a-dire 
quand l'utilisateur a clique sur le bouton control eur. lire. Le gestionnaire d'evenement 
Event. ENTER_FRAME est done place a l'interieur du gestionnaire MouseEvent. CLICK associe 
au bouton control eur . 1 i re. 

Lorsque la video cesse d'etre lue soit parce que la fin est atteinte, soit parce que l'utili- 
sateur a clique sur le bouton stopper ou f ai reUnePause, la barre de progression cesse 
d'avancer. 

Pour chacun de ces cas, nous detruisons le gestionnaire d'evenement Event. ENTER_FRAME 
en utilisant 1' instruction : 

if ( controleur.bulleProgress != null) { 

removeEventListener(Event. ENTER_FRAME, barreProgresse) ; 

} 

Cette instruction est placee dans la fonction remi seAZero( ). 

Lorsque la video arrive a sa fin ou si elle est arretee parce que l'utilisateur a clique sur le 
bouton stopper, la barre de progression doit revenir a sa position initiale. 

Pour cela, nous placons l'instruction : 

control eur. bull eProgress. seal eX=0. 01; 

a l'interieur de la fonction remi seAZero( ) afin de rendre la ligne si petite qu'elle en devient 
invisible. 

Le texte 

Apres le son et la video, nous examinons comment importer, dans une animation, une 
information enregistree dans un fichier texte. 

Le chargement dynamique de contenu textuel est tres utilise pour modifier le contenu 
d'un site, par exemple, sans avoir a entrer directement dans le fichier source de l'application 
(fichier d'extension . f 1 a). 

II existe plusieurs formes de donnees textuelles : 

• II y a le simple texte formant un contenu charge de sens. Ce sont par exemple les arti- 
cles de journaux, les poesies ou encore un paragraphe de ce livre. Nous etudions le 
chargement texte editorial a la section « Charger un texte a la volee » ci-apres. 
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• Les fichiers texte peuvent egalement contenir une information manipulable sous la 
forme de paires variable-valeur. Cette forme de fichier est tres utile pour envoyer des 
donnees a l'application en cours d'execution. Ces donnees sont utilisees pour indiquer 
a l'application les ressources dont elle a besoin pour afficher son contenu (couleur, 
type de fonte...)- Nous analysons le chargement de variables a la section « Charger 
des variables et leur valeur » ci-apres. 

L'integration de donnees textuelles au sein d'une animation est realisee par l'interme- 
diaire de la classe URLLoader. Tout comme la classe Sound ou NetStream, la classe URLLoader 
est composee de mefhodes, de proprietes et de gestionnaires d'evenements. Nous les 
etudions ci-apres a partir d'exemples permettant raffichage d'un texte dans une fenetre 
munie d'une scroll Bar (voir section « Charger un texte a la volee ») ou la creation de 
photos affichant des informations lues depuis un fichier externe (voir section « Charger 
des variables et leur valeur »). 

Charger un texte a la volee 

L'objectif de ce premier exemple est d' afficher une zone de texte munie d'une barre de 
defilement (scrol 1 Bar) sur sa droite. Le texte affiche est lu a partir d'un fichier texte enre- 
gistre dans le repertoire Textes. 



Extension web 

Vous pourrez tester cet exemple en executant le fichier LireUnTexte.fi a, sous le repertoire Exemples/ 
chapitrelO. Les fichiers texte sont places dans le repertoire Exemples/chapitrelO/Textes. 



La mise en place de cet exemple s'effectue en plusieurs temps. Les etapes consistent a : 

• Creer un format d'affichage definissant la fonte, la taille et la couleur des caracteres. 

• Creer une zone de texte par programme et l'associer a une scrol 1 Bar. 

• Charger le texte lu depuis un fichier externe dans la zone de texte. 

Creer un format d'affichage 

La creation d'un format de texte est realisee par 1' intermediate de la classe TextFormat et 
de son constructeur, puis en modifiant les proprietes souhaitees de l'objet cree comme 
suit : 

//Creer un format de texte 

var unFormat:TextFormat = new TextFormatf. ) ; 

//Modifier les proprietes du format de texte 
unFormat.font = "Arial"; 
unFormat.size = 14; 
unFormat. align = "left"; 
unFormat. color = 0x333333; 

L'objet unFormat est cree a l'aide du constructeur TextFormat( ). L'utilisation du format 
unFormat, tel qu'il est defini, a pour consequence d'afficher le texte en Arial de taille 14, 
avec un alignement a gauche. La couleur du texte est gris fonce. 
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Pour resumer, les proprietes les plus courantes d'un format de texte sont les suivantes : 



Tableau 10-7 Les proprietes les plus utilisees d un TextFormat 



Proprietes 


Operation 


font 


font est une chaine de caracteres indiquant le nom de la police de caracteres a utiliser. 


size 


size estun nombre definissant la taille, en points, de la police de caracteres. 


col or 


color est un nombre en hexadecimal definissant la couleur de la police. 


bold 


bold estun booleen. S'il vaut true, les caracteres sontaffiches en gras. 


ital i c 


italic estun booleen. S'il vaut true, les caracteres sont affiches en italique. 


underl ine 


underl ine est un booleen. S'il vaut true, les caracteres sontsoulignes. 


al ign 


al ign est utilise pour aligner a gauche, a droite, centrerou justifier le texte. Ces alignements 
sont definis respectivement par les constantes left, right, center et justify. 


1 eftMargi n 


1 eftMargi n est une valeur numerique precisant en nombre de points la taille de la marge 
gauche. 


rightMargin 




rightMargin est une valeur numerique precisant en nombre de points la taille de la marge 
droite. 



Creer une zone de texte 

La creation et la modification des proprietes d'une zone de texte sont realisees par les 
instructions suivantes : 

//© Creer une zone de texte 

var unTexte:TextField = new TextFieldO; 

//Positionner le champ de texte 

unTexte.x = 1 argeurFixe/4 ; 

unTexte.y = hauteurFixe/3 ; 

//Definir la taille de la zone de texte 

unTexte. width = 2*largeurFixe/3; 

unTexte. height = hauteurFixe/4; 

//© Modifier le format du texte 

unTexte. defaultTextFormat = un Format; 

//© Modifier les proprietes de la zone de texte 

unTexte. selectable = false; 

unTexte. wordwrap = true; 

unTexte. multiline = true; 

unTexte. background = false; 

unTexte. border = false; 

unTexte. type = "dynamic"; 

//Afficher la zone de texte 

addChild(unTexte) ; 

O La zone de texte est creee a partir de la classe TextField. Loccurrence unTexte est 
creee en utilisant l'operateur new. La zone de texte est positionnee sur la scene, en 
modifiant les proprietes x et y de l'objet unTexte. 1 argeurFixe/4 et hauteurFixe/3 sont 
des valeurs indiquant les coordonnees sur l'axe des X et des Y du nouveau champ de 
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texte. La taille de la zone de texte est definie en modifiant les proprietes width et 
height de l'objet unTexte qui determinent la largeur et la hauteur du nouveau champ 
de texte, respectivement. 

© La definition de format d' affichage de la zone de texte est mise en place en modifiant 
la propriete def aiil tTextFormat de la zone de texte unTexte. Ici, la zone de texte a pour 
format d'affichage le format unFormat defini a l'etape precedente. 

© Les proprietes les plus courantes d'une zone de texte sont les suivantes : 



Tableau 10-8 Les proprietes les plus courantes d'unTextField 



Proprietes 


Operation 


type 


4~ \/ o Hofimf lo hino Ho 1 2 ~? nno Ho ("o vfo C'll wo 1 1 f H \ / n a m n f 1 0 ~? n no Ho ho vt"o no 11 0 1 1 r oH"o 
lypc Ucllllll Ic Lypc Uc Id ZUIIC Uc IcAlc. J II VdUlUyMallML, Id ZUIIc Uc IcAlc lie pcUl cllc 

modifiee par I'utilisateur, ets'il vaut input la zone de texte devient un champ de saisie. 


border 


border est un booleen qui indique si la zone de texte contient une bordure (true) ou non 
(false). 


background 


background est un booleen qui indique si la zone de texte possede un fond (true) ou non 
(false). 


password 


password estun booleen qui indique si la zone de texte estun champ de saisie de motde 
passe (true). Dans ce cas, la saisie des caracteres est masquee. Lorsque le mode mot 
de passe est active, les commandes Couper et Copier et leurs raccourcis clavier ne fonc- 
tionnent pas. 


multiline 


multiline estun booleen qui indique si la zone de texte est multiligne (true) ou sur une 
seule ligne (false). 


sel ectabl e 


selectable estun booleen qui indique si une zone de texte estselectionnable (true). Si 
selectable est false, le texte ne peutetre selectionne ni a la souris ni au clavier ni avec 
Ctrl+C. 


wordwrap 


wordwrap est un booleen qui indique si la zone de texte comporte un retour a la ligne 

(true). 


mouseWheel Enabl e 


mouseWheel Enable est un booleen qui indique si le lecteur Flash doit automatiquement 
faire defiler une zone de texte multiligne lorsque le pointeur de la souris clique sur la zone 
de texte et que I'utilisateur actionne la molette de la souris. Par defaut, cette valeur est 
true. 


restri ct 


restrict indique le jeu de caracteres qu'un utilisateur peutsaisir dans une zone de texte 
de saisie. Si la valeur de la propriete restrict est null, vous pouvezentrern'importe quel 
caractere. Si e'estune chaine vide, aucun caractere ne peutetre entre. Sic'estune chaine 
de caracteres, vous ne pouvez entrer que les caracteres de la chaine dans la zone de 
texte. 


maxChars 


maxChars est un nombre qui indique le nombre maximal de caracteres qu'une zone de 
texte peutcontenir. 



Creer une barre de defilement 

Pour mettre en place une barre de defilement, nous utilisons le composant 
fl . controls. UIScrollBar propose par l'environnement Flash. Les instructions de creation 
d'une barre de defilement sont les suivantes : 

//Importer le composant UIScrollBar 

import fl .controls. UIScrollBar; 

//O Creer un composant mx. controls. UIScrollBar 

var uneScrollBarre:UIScrollBar = new UlScrol 1 Bar( ) ; 
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//© Attacher la barre de defilement au texte 
uneScrollBarre.scrollTarget = unTexte; 
uneScrollBarre. height = unTexte. height; 

uneScrollBarre. move(unTexte.x + unTexte. width+5, unTexte. y); 

//Afficher la barre de defilement 
addChi 1 d( uneScrol 1 Barre) ; 

O L'objet uneScroll Barre est cree en utilisant le constructeur de la classe UlScrol 1 Bar. 



Remarque 

L'objet fl .control s. UlScrol 1 Bar doit etre defini dans la bibliotheque de votre application. Pour cela, il 
vous suffit d'ouvrir le panneau Composant (ctrl +F7 ou commande +F7) etde faire glisser le composant 
UlScrol l Bar sur la scene. Le composant est alors enregistre dans la bibliotheque. Vous devez 
supprimer I'occurrence placee sur la scene. 



© L'objet uneScrollBarre est associe a la zone de texte par 1' intermediate de la pro- 
priete scrol 1 Target. La propriete height ajuste ensuite la taille (en hauteur) de la 
barre de defilement a la zone de texte. La methode move( ), quant a elle, positionne 
la barre de defilement a droite de la zone de texte (unTexte. x + unTexte. width) et a la 
meme hauteur (unTexte. y). 

Lire le texte a partir d'un fichier 

La zone de texte munie d'une barre de defilement et d'un format d'affichage est definie. 
II ne nous reste plus qu'a lire le fichier contenant le texte, pour le placer dans la zone de 
texte. Ces operations sont realisees par les instructions suivantes : 

//O Creation d'un objet de type URLLoader 
var infosTexte:URLLoader = new URLLoaderO; 

infosTexte. load (new URLRequest( "Textes/ La ProgrammationObjet.txt") ; 
//© Definition du gestionnaire Event. COMPLETE 
infosTexte. add Event Li stenerf. Event. COMPLETE, auChargement) ; 

function auChargement(e:Event):void ( 

unTexte. text = URLLoader(e. target) .data; 

uneScrol 1 Barre.updatet ) ; 

} 

O Le chargement dynamique d'un fichier texte est realise par la classe URLLoader. Le 
constructeur URLLoaderO cree un objet infosTexte qui fournit les outils necessaires 
pour recuperer les informations stockees dans un fichier. La methode loadO est le 
premier outil a utiliser pour charger les informations contenues dans le fichier dont 
le chemin d'acces est indique en parametre du constructeur URLRequest("Textes/ 
LaProgrammationObjet.txt"). 



Remarque 

Le fichier LaProgrammationObjet.txt ne contient rien d'autre que le texte a afficher. II est enregistre 
en utilisant le codage UTF-8 ( ). 

© Le gestionnaire d'evenement Event. COMPLETE est invoque lorsque les donnees sont 
chargees. Le texte contenu dans le fichier est enregistre dans la zone de texte dynami- 
que unTexte. text, creee precedemment. La barre de defilement est associee au texte 
nouvellement charge grace a la methode update( ) appliquee a l'objet uneScrol 1 Barre. 
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Charger des variables et leur valeur 

Les fichiers texte peuvent egalement contenir une information manipulable sous la forme 
de paires variable-valeur. Cette forme de fichier est tres utile pour transmettre, en cours 
d'execution, des valeurs utilisees par l'application. 

Le chargement de variables et des valeurs associees fait egalement appel a la classe 
URLLoader. Les informations sont enregistrees dans un fichier texte, codees au format 
UTF-8. 

Pour specifier au lecteur Flash, quelles sont les variables et quelles sont les valeurs asso- 
ciees, les informations doivent etre ecrites avec une syntaxe bien precise, encodee a la 
maniere d'une URL. 

Par exemple, pour definir les donnees d'une personne, la syntaxe est la suivante : 
prenom=Elena&nom=T%2E&dateNaissance=16%2F04£2F1993 

Les noms des variables sont toujours precedes du signe & (excepte le nom de la premiere 
variable) et la valeur associee est precedee du signe =. Ici nous avons trois variables 
prenom, nom et dateNai ssance qui contiennent respectivement Elena, T. et 16/04/1993. 



Remarque 

Tout caractere qui n'est pas un chiffre ou une lettre de I'alphabet (non accentue) ou un espace, doit etre 
converti en une sequence d'echappement hexadecimal. Ainsi le caractere " . " a pour sequence %2E, le 
caractere "/"a pour sequence £2F. 



La liste des sequences les plus courantes est la suivante : 



Tableau 10-9 Les sequences hexadecimales les plus courantes 



Caractere 


Sequence 


Caractere 


Sequence 


Caractere 


Sequence 


<espace> 


%20 ou + 


* 


%2A 


> 


%3E 


! 


%21 


+ 


%2B 


? 


%3F % 




%22 




%2C 


@ 


%40 


[#~ 


%23 




%2D 


~ 


%5B 


$ 


%24 




%2E 




%5C 


% 


%25 




%2F 




%5D 


& 


%26 




%3A 




%5E 




%27 




%3B 




%5F 


n~ 


%28 


< 


%3C 




%7C 


n~ 


%29 




%3D 




%7C 



Les donnees sont lues et interpreters comme etant de type Stri ng, il n'est done pas besoin 
de placer les valeurs El ena, T. et 16/04/93 entre guillemets. 

Lire un jeu de donnees 

Examinons sur un exemple simple, comment lire le fichier de donnees El ena .txt conte- 
nant la ligne : 

prenom=Elena&nom=T%2E&dateNaissance=16*2F04%2F1993 
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L'objectif est de lire les donnees enregistrees dans le fichier Elena.txt et d'afficher la 
photo correspondante. Une zone de texte precisant le nom du fichier contenant les infor- 
mations est placee sous la photo (voir figure 10-10). Si le fichier n'a pu etre charge, la 
zone de texte affiche « Impossible de charger : Textes/Elena.txt ». 



Extension web 

Vous pourrez tester cetexemple en executant le fichier Li reDesvaleurs.fi a, sous le repertoire Exemples/ 
chapitrelO. Les fichiers texte sont places dans le repertoire Exemples/chapitrelO/Textes. 



Figure 10-10 

Les donnees 
d'une personne sont 
chargees depuis 
un fichier exterieur 
a I 'application. 




Infos chargees 
depuis 

Tcxtco/Elcnatxt 



Lire le fichier de donnees 

La lecture des donnees s'effectue de la meme facon que la lecture d'un fichier de texte. 
Elle est realisee par 1' intermediate d'un objet de type URLLoader. Les donnees sont char- 
gees a l'appel de la methode 1 oad( ) qui prend en parametre le nom du fichier a lire, via le 
constructeur de la classe URLRequest( ). 

La recuperation des variables et des valeurs s'ecrit alors comme suit : 

var uneInfo:URLLoader = new URLLoaderO; 
//© Le texte charge est traite comme variable 
unelnfo.dataFormat = URLLoaderDataFormat. VARIABLES; 
unelnfo. load (new URLRequestt "Textes/El ena .txt" ) ) ; 
//© Definition du gestionnaire Event. COMPLETE 
unelnfo.addEvent Listener (Event. COMPLETE, auChargement) ; 

function auChargement(e:Event):void ( 

var donneesChargeesiURLLoader = URLLoader(e. target) ; 

var uneFille:Personne = new Personne(donneesChargees.data.prenom, 

donneesChargees. data. nom, 
donneesChargees.data.dateNaissance) ; 

uneFille.x = 1 argeurFixe/2 - taillePhoto; 

uneFille.y = (hauteurFixe - tail lePhoto)/2; 

addChild(uneFille); 

//© Afficher une information 

afficherTexteC'Infos chargees depuis Textes/Elena.txt", 
1 argeurFixe/2 - taillePhoto, 
(hauteurFixe +taillePhoto)/2) ; 

} 

//© Definition du gestionnaire IOErrorEvent. I0_ERR0R 
unelnfo.addEvent Li stener( IOErrorEvent. I0_ERR0R, si Erreur) ; 
function siErreur(e:Event):void { 
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afficherTexteC'Impossible de charger Textes/El ena .txt" , 
largeurFixe/2 - taillePhoto, 
(hauteurFixe +taillePhoto)/2) ; 

} 

O L' occurrence unelnfo doit etre configured pour que le texte charge soit interprets 
non pas comme un simple texte mais, comme des variables encodees comme 
une URL. Pour cela, nous initialisons la propriete dataFormat avec la constante 
URLLoader Data Format .VARIABLES. 

© Lors du chargement des donnees via la methode 1 oad( ), le gestionnaire d'evenement 
Event. COMPLETE est utilise pour charger les donnees. Si le chargement des donnees 
s'est bien deroule, un objet uneFille de type Personne, est cree en utilisant les infor- 
mations - nom, prenom et date de naissance - lues dans le fichier Elena. txt et en les 
placant en parametres du constructeur Personne( ). En cas de difficulte de chargement, 
un evenement de type IOErrorEvent . I0_ERR0R est emis (voir O). 

Les termes donneesChargees. data. prenom, donneesChargees. data. nom et donneesChargees 
.data.dateNaissance sont dermis a partir des noms de variables decrits dans le fichier 
texte (terme precede du signe &). Les valeurs qu'elles contiennent sont egalement four- 
nies par le fichier texte (terme precede du signe =). 

Une fois l'objet uneFille cree, il est positionne sur la scene puis affiche par l'inter- 
mediaire de la methode addChi 1 d( ). 

© La methode afficherTexte( ), decrite ci-apres, est utilisee pour afficher un message 
dans une zone de texte. Ce message confirme ou infirme le bon deroulement du char- 
gement des donnees. 

0 Lorsque le lecteur Flash rencontre une erreur fatale entrainant 1' arret du telecharge- 
ment, un evenement de type IOErrorEvent. I0_ERR0R est emis. La methode siErreurO 
est executee pour afficher un texte indiquant l'echec du chargement des donnees. 

La methode afficherTexteO 

La methode afficherTexteO reprend les instructions de creation de format de texte et de 
zone de texte decrites a la section « Charger un texte a la volee » de ce chapitre. 

//© Creation du format 

var unFormat:TextFormat = new TextFormat( ) ; 

unFormat.font = "Arial"; 

unFormat.size=14; 

unFormat.al i gn=" 1 eft" ; 

un Format . col or=0x333333 ; 

//© Definition de la methode afficherTexteO 

function afficherTexte(leTexte:String, nx:Number, ny :Number) :void { 

//Creer un champ de texte a la volee 
var unTexte:TextField = new TextFieldO; 
//Modifier le format de texte par defaut 
unTexte.defaultTextFormat = unFormat; 
//Positionner le champ de texte 
unTexte.x=nx ; 
unTexte.y=ny ; 

unTexte. width = taillePhoto+ecart; 
unTexte. height = taillePhoto; 
unTexte. selectable = false; 
unTexte. wordwrap = true; 
unTexte. multiline = true; 
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unTexte. background = false; 
unTexte. border = false; 
unTexte. type = "dynamic"; 
unTexte. text = leTexte; 
addChild(unTexte) ; 

} 

O Le format de texte unFormat est defini comme variable globale du script. Pour eviter 
de creer le meme format d'affichage a chaque appel de la methode, il n'est pas 
conseille d'inclure ces instructions dans la methode afficherTexte( ). 

© Le premier parametre de la methode (1 eTexte) contient le message a afficher dans la 
zone de texte a creer. Les parametres nx et ny sont utilises pour placer la zone de texte 
sur la scene. 

Structurer les donnees 

Lorsque les donnees sont chargees dans un objet de type LoadVars, les variables portant le 
meme nom sont ecrasees au fur et a mesure du chargement. Ainsi, par exemple, si les 
donnees : 

prenom=El ena&nom=T%2E&dateNai ssance=16%2F0«2F1993 
prenom=Nicolas&nom=CZ2E&dateNaissance=10%2F07%2F1996 

sont enregistrees dans le meme fichier ressources, seules les informations concernant 
Nicolas seront retenues. Les variables (prenom, nom...) portant le meme nom, le prenom 
Nicolas, vient effacer le prenom Elena, le nom C. efface T 

Remarque 

Nous appelons un « fichier ressource », un fichier contenant des informations dont I'objectif est de modi- 
fier la presentation de I'animation en cours d'execution. 



Si Ton souhaite afficher plusieurs personnes a partir de donnees fournies par un fichier 
ressources, nous devons : 

• soit creer des noms de variables differents, par exemple : 
pn=Elena&nO=|_%2&dnO=16%2F04%2F1993 

pl=Nicol as&nl=C%2&dnl=10%2F07%2F1996 

• soit creer un fichier Repertoire.txt contenant les noms des fichier ressources, par 
exemple : 

contact 1=E1 ena&contact2=Ni col as 

Puis lire chaque fichier relatif aux contacts enregistres dans le fichier Repertoire.txt 
(soitElena.txt etNicolas.txt). 

Chacune des deux methodes ayant ses avantages et ses inconvenients, nous avons choisi 
de vous presenter une implementation de la seconde solution. 



Extension web 

Vous pourrez tester cet exemple en executant le fichier LireUnEnsembleDeDonnees.fla, sous le reper- 
toire Exemples/chapitrelO. Les fichiers texte sont places dans le repertoire Exemples/chapitrelO/ 
Textes. 



Le traitement de donnees multimedia I 

i i hi B 

Le fichier Repertoire.txt et les autres 

Le fichier Repertoi re.txt contient les informations suivantes : 

contact 1=E1 ena&contact2=Ni col as 

Le fichier Elena.txt : 

prenom=El ena&nom=T£2E&dateNai ssance=16X2F04£2F1993 

LefichierNicolas.txt : 

prenom=Nicolas&nom=C%2E&dateNaissance=10%2F07%2F1996 

La lecture du fichier Repertoi re . txt et le chargement des donnees sont realises par le jeu 
d' instructions suivant : 

une Info. 1 oad(new URLRequest( "Textes/ Repertoi re.txt" ) ) ; 
unelnfo.dataFormat = URLLoaderData Format. VARIABLES; 

une Info. add Event Listener (Event. COMPLETE, auChargementRepertoire) ; 
function auChargementRepertoire(e:Event):void { 

var donneesChargees:URLLoader = URLLoader(e. target) ; 

//Afficher les infos de contactl 

1 ireEtAffi cher Info( "Textes /"+donneesCha rgees.dat a. con tact 1+" .txt" , 
1 argeurFixe/2 - taillePhoto - ecart, 
(hauteurFixe - tai 1 1 ePhoto ) /2) ; 

//Afficher les infos de contact2 

1 i reEtAffi cher Info( "Textes /"+donneesChargees .data .con tact2+" .txt" , 
1 argeurFixe/2 + ecart, 
(hauteurFixe- tai 1 1 ePhoto ) /2) ; 

} 

Les variables donneesChargees. data. contactl et donneesChargees.data.contact2 contien- 
nent les prenoms des deux personnes dont on souhaite afficher la photo. Ces variables 
sont utilisees pour definir le chemin d'acces aux fichiers contenant les informations rela- 
tives a chacune des personnes a creer (Textes /"+donneesChargees .data, con tact 1+" .txt). 

La methode 1 i reEtAffi cherInfo( ) est ensuite utilisee pour creer et afficher les photos des 
personnes enregistrees dans le repertoire. 

La methode lireE tAfficherlnfoO 

function lireEtAfficherInfo(nomFichier:String, nx:Number, ny: Number): void { 
var tmp:URLLoader = new URLLoaderO; 
tmp.addEventListener(Event. COMPLETE, auChargement) ; 
tmp. load (new URLRequest(nomFichier) ) ; 
tmp.dataFormat = URLLoaderDataFormat. VARIABLES; 
tmp. addEvent Li stener ( IOError Event . IO_ERR0R, si Erreur) ; 
function auChargement(e:Event):void { 
var donneesChargees:URLLoader = URLLoaderte. target) ; 
var unePersonne:Personne = new Personne(donneesChargees .data .prenom, 

donneesChargees .data .nom, 
donneesChargees .data .dateNai ssance) ; 

unePersonne.x = nx; 
unePersonne.y = ny; 

afficherTexteCInfos chargees depuis " + nomFichier, nx, ny + taillePhoto); 
addChi 1 d(unePersonne) ; 

} 
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function si Erreur(e: Event) :void { 
afficherTextet" Impossible de charger : " + nomFichier, nx, ny + taillePhoto); 

} 

} 

La methode 1 i reEtAfficherInfo( ) reprend la meme technique de lecture du fichier 
ressources, technique presentee au cours de la section « Lire un jeu de donnees » 
de ce chapitre. Elle est appelee deux fois au sein du gestionnaire d'evenement 
auChargementRepertoi re( ). 

• La premiere fois, pour lire le fichier Textes/Elena.txt. Si les donnees sont correcte- 
ment chargees, la methode affiche la photo d'Elena a l'aide du constructeur de la 
classe Personne et une zone de texte indiquant l'emplacement du fichier ressources 
(aff i cherTexte( )). 

• La seconde fois, pour lire le fichier Textes/Ni colas.txt. Si les donnees sont correcte- 
ment chargees, la methode affiche la photo de Nicolas et une zone de texte indiquant 
l'emplacement du fichier ressources (aff i cherTexte( )). 



Remarque 

Les deux actions auChargement( ) et siErreurO sont definies a I'interieur de la methode 
1 i reEtAfficherlnfot ). De cette fagon, les parametres nomFichier, nx et ny sont connus des deux 
actions etvarienten fonction du contact a afficher. 



Le fait d'ajouter un nouveau contact, dans le fichier Repertoire.txt, nous oblige a modi- 
fier le gestionnaire auChargementRepertoi re( ) pour y inserer un nouvel appel a la methode 
lireEtAfficherInfo( ). II n'est done pas possible d'automatiser l'ajout de donnees externes a 
une animation sans intervenir dans le code source. 

La mise en place de fichiers ressources composes de donnees ecrites sous la forme de 
paires variable-valeur n'est pas toujours des plus simples. Si les donnees a traiter sont 
plus complexes ou plus imbriquees, leur manipulation par 1' intermediate d'un simple 
gestionnaire Event. COMPLETE devient tres vite un casse-tete chinois. 

Au cours de la section suivante, nous observons combien l'utilisation du format de fichier 
XML simplifie la gestion dynamique des donnees. 

XML, ou comment organiser vos donnees 

Nous venons de l'observer une nouvelle fois, la structure d'un programme, son efficacite 
et sa simplicite d' utilisation dependent fortement de la structure des donnees et des outils 
proposes pour les manipuler. Dans cette section, nous etudions le format XML et observons 
combien son organisation facilite la mise en place d' applications dynamiques. 

Le format XML (extensible Markup Language) est un langage de description de 
donnees, forme de balises propres au developpeur. II permet d'enregistrer des informa- 
tions dans une structure logique relativement simple et facilement accessible par le 
lecteur Flash. 

Nous utilisons tous les jours des donnees structurees : 

• Lorsque nous prenons un livre, nous savons que ce dernier contient des informations 
comme le titre, le nom de l'auteur, le nom de l'editeur, etc. Un livre possede egalement 
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une quatrieme de couverture, des chapitres, des sections, une table des matieres, un 
index... 

• Lorsque nous ouvrons un repertoire, nous nous attendons a trouver une liste de 
personnes possedant chacune une ou plusieurs adresses, un ou plusieurs numeros 
de telephone et des caracteristiques propres. 

Le format ainsi que 1' organisation des donnees sont propres aux objets utilises. lis nous 
assurent que 1' information est rapidement accessible, interpretee et comprise. Ainsi, nous 
ne cherchons pas le numero de telephone d'un ami dans le sommaire de notre roman 
prefere. 



XML en quelques mots 

Le format XML offre la possibilite d'organiser les donnees en les nommant et les agen- 
cant selon une hierarchie propre a la structure que nous souhaitons mettre en place. Pour 
cela, le langage XML utilise une syntaxe assez proche du langage HTML, composee de 
balises et d'attributs. 

Pour simplifier notre expose, nous examinons ces concepts a partir d'exemples qui vous 
permettront de mieux comprendre la structure generate d'un fichier XML et son utilisation 
sous Flash. 

Structure d'un fichier XML 

Un fichier XML est constitue de balises. Leur nom est choisi par vos propres soins en 
fonction de ce que vous souhaitez decrire. Par exemple, pour realiser un repertoire tele- 
phonique, la toute premiere balise peut s'ecrire : 

<Repertoi re> 

Description des personnes avec leurs numeros de telephone 
</Repertoi re> 

Pour signifier qu'un mot est une balise, nous l'entourons des signes < et >. La balise 
<Repertoire> est appelee balise ouvrante, et la balise </Repertoi re>, balise fermante. 
Le couple <Repertoi re> </Repertoi re> s'appelle un nceud. 

La description des personnes contenues dans le repertoire s'effectue egalement par 
1' intermediate de balises comme suit : 

<Repertoi re> 

<Personne nom="T." prenom="El ena" dateNaissance="16/04/1993" /> 

<Personne nom="C." prenom="Nicolas" dateNaissance="10/07/1996" /> 

<Personne nom="Y." prenom="Margoline" dateNaissance="22/02/1974" /> 

<Personne nom="R." prenom="Lamy" dateNaissance="18/01/1970" /> 

</Repertoi re> 

Dans cet exemple, observons que : 

• L' ensemble des balises <Personne ... /> est place a l'interieur du nceud <Repertoi re> </ 
RepertoireX On dit alors que le nceud <Repertoire> </Repertoi re> constitue le nceud 
racine du fichier XML. 



Remarques 

Un fichier XML ne peutetne doit contenir qu'un seul noeud racine. Toute nouvelle balise doit etre inseree 
a l'interieur du noeud racine. 
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• Les balises <Personne ... /> sont considerees comme les noeuds enfants du noeud racine 
<Repertoire> </Repertoi re>. Dans cet exemple, le noeud racine possede quatre noeuds 
enfants (Elena, Nicolas, Margoline et Lamy). 

Un fichier XML definit done une arborescence constituee d'un noeud racine et de 
noeuds enfants, eux-memes pouvant definir egalement de nouveaux noeuds enfants. 

• Les termes nom, prenom et dateNai ssance definis au sein du noeud <Personne... /> sont 
appeles des « attributs ». Chaque noeud peut en posseder un nombre illimite. lis 
sont utilises pour transmettre des paires variable- valeur a 1' application Flash (voir 
section « Lire un fichier XML » plus loin dans ce chapitre). 

Regies syntaxiques 

L'ecriture et la construction d'un fichier XML sont regies par un certain nombre de regies 
qu'il convient de suivre, sous peine d'obtenir des erreurs de syntaxe et/ou des erreurs 
d'interpretation lors du chargement du fichier par le lecteur Flash. 

Les regies d'ecriture d'un fichier XML sont les suivantes : 

• Quel que soit le mode de saisie du fichier XML, ce dernier doit etre enregistre en utili- 
sant le codage UTF-8. Pour cela, vous devez examiner attentivement les options 
d'enregistrement lors de la premiere sauvegarde du fichier. 

• Un fichier XML a pour extension . xml . 

• Aucune balise ne peut commencer par XML. 

• L'utilisation des majuscules et/ou minuscules doit etre respectee entre les balises 
ouvrante et fermante. 

• A chaque balise ouvrante doit correspondre une balise fermante. 

• II ne peut y avoir qu'un seul noeud racine. 

• L'insertion d'espace, de tabulation et de saut de ligne n'a aucune influence sur la 
bonne lecture des donnees. 

En respectant chacune de ces quelques regies, vous vous assurez de construire une arbo- 
rescence XML coherente et d'ecrire un fichier XML au bon format. 



Lire un fichier XML 

Maintenant que nous savons construire une arborescence XML, examinons comment 
recuperer les informations qu'elle contient sous Flash. 

Le chargement et la gestion de donnees XML au sein d'un script ActionScript s'effectuent 
par 1' intermediate des classes URLLoader et XML. 

Les classes XML 

La classe XML permet d' analyser, de creer et de manipuler des arborescences de documents 
XML. 
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P roprietes et methodes de la classe XM L 

Les proprietes et methodes les plus couramment utilisees sont les suivantes : 



Tableau 10-10 Les proprietes et methodes les plus utilisees de la classe XML 



Proprietes 


Operation 


ignoreWhitespace 


Si la propriete ignoreWhitespace vauttrue, les caracteres « espace » places au debut 
eta la fin des balises de texte sont ignores lors de I'analyse de I'arbre XML. 


XMLO 


Constructed de la classe XM L, il retourne I'adresse d'un objet sur lequel pourront s'appli- 
quer les methodes decrites ci-apres. 


attri bute( ) 


Renvoie la valeur de I'attribut correspondant au nom passe en parametre de la methode. 


attributes( ) 


Renvoie la liste des attributs associes a I'objet XML sur lequel est applique la methode. 


containsO 


Compare I'objet XML a la valeur passee en parametre. La methode renvoie true s'il y a 
correspondance. 


elementsO 


Decrit les elements d'un objet XML. Un element se compose d'une balise de debut et 
d'une balise de fin, 


name( ) 


Indique le nom completde I'objet XML. 


toStringt ) 


Renvoie I'objet XML sous forme de chaine. 





Parcourir une liste d'elements XML 

Les donnees XML sont rarement constitutes d'une seule balise. Par essence, l'informa- 
tion contenue dans un fichier XML definit une suite de donnees et de valeurs que l'ont 
peut traiter comme une liste a parcourir. La classe XML List est tres utile pour examiner 
chaque element d'un arbre XML. 

Le parcours d'une liste est le plus souvent realise a l'aide d'une boucle for... in, comme 
suit : 

var listeElements:XMLList = new XMLListO; 

var donneesXMLLuesDansUnFi chier :XML; 

listeElements = donneesXMLLuesDansUnFichier. elementsO; 

for each (var elt:XML in listeElements) { 

//Afficher un element de la liste 

trace(elt.attribute("prenom") + elt.attributeC'numero") ); 

} 

La boucle for ainsi ecrite n'utilise plus de compteur de boucles ni de tests de fin de 
boucle. Ceux-ci sont geres de facon transparente pour le programme ur. 

La liste listeElements est parcourue element par element, du premier jusqu'au dernier 
element. La liste listeElements est composee de la suite de toutes les balises definies au 
sein du fichier XML grace a 1' instruction : 

listeElements = donneesXMLLuesDansUnFichier .el ements( ) ; 

La valeur de chacun des elements est enregistree tour a tour dans la variable el t qui est 
ensuite affichee. Plus simplement, vous pouvez traduire cette nouvelle boucle for en 
utilisant la formule suivante : 



« Pour chaque valeur de la liste listeElements, afficher la valeur des attributs prenom et 
numero ». 
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Nous presentons ci-apres, les methodes, les proprietes et les gestionnaires d'evenements 
les plus utilises pour traiter des donnees XML. Les deux exemples servant de support a 
cette presentation reprennent la classe Personne definie au chapitre precedent. 

Afficher une liste XML de personnes 



Extension web 

Vous pourrez tester cet exemple en executant le fichier uneListeDePersonnesXML.fla, sous le reper- 
toire Exemples/chapitrelO. Les fichiers au format XML sont places dans le repertoire Exemples/ 
chapitrelO/XML. 



L'objectif est d'afficher le trombinoscope d'un ensemble de personnes. Les donnees rela- 
tives a chaque personne sont stockees dans un fichier XML nomme 1 istePersonnes .xml se 
presentant sous la forme suivante : 

<Repertoi re> 

<personne nom="T." prenom="Elena" dateNaissance="16/04/1993" /> 

<personne nom="C." prenom="Nicolas" dateNai ssance="10/07/1996" /> 

<personne nom="Y." prenom="Margol ine" dateNaissance="22/02/1974" /> 

<personne nom="R." prenom="Lamy" dateNaissance="18/01/1970" /> 
</Repertoi re> 

Charger une liste de personnes 

Le chargement des donnees XML s'effectue via un objet de type URLLoader. Les donnees 
sont ensuite transferees par 1' intermediate d'un objet de type XML. 

Le chargement du fichier s'effectue de la meme facon que pour le chargement de donnees 
textuelles ou de variables. Seule la propriete dataFormat differe. Cette derniere est initia- 
lisee avec la constante URLLoaderDataFormat.TEXT afin d'indiquer au lecteur Flash que les 
donnees a charger sont au format textuel. 

• L'objet chargeurXML est cree par le constructeur de la classe URLLoader a l'aide de 
1' instruction : 

var chargeurXML:llRLLoader = new URLLoaderO; 

• Le type des donnees a charger est precise en initialisant la propriete dataFormat, 
comme suit : 

chargeurXML. dataFormat = URLLoaderDataFormat.TEXT; 

• Le fichier est ensuite charge a l'aide de la methode 1 oad( ) qui prend en parametre, via 
le constructeur de la classe URLRequest( ), le nom du fichier XML que Ton souhaite 
utiliser. 

| chargeurXML. load (new URLRequestt "XML/1 istePersonnes .xml ") ) ; 

Dans cet exemple, nous chargeons les donnees enregistrees dans le fichier 
1 i stePersonnes .xml . 

• Pour finir, les donnees ne peuvent etre traitees qu'apres leur chargement effectif. Nous 
devons done definir le gestionnaire d'evenement Event. COMPLETE comme suit : 

chargeurXML. addEvent Listener (Event. COMPLETE, gestionXML) ; 
function gestionXML (e: Event) :void { 

//Traitement des donnees XML 

} 
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Recupererles informations relatives a chaque personne 

Lorsque les donnees sont chargees, le gestionnaire Event. COMPLETE est en mesure de les 
examiner afin de creer et d'afficher les photos relatives a chaque personne enregistree 
dans le fichier listePersonnes.xml. 

L' action gestionXML s'ecrit comme suit : 

function gestionXML(e:Event) :void { 

//© Tester 1 'extraction des donnees 
try { 

//© Cree un objet XML et un objet XMLList 

var donneesLues:XML = new XML(e. target. data) ; 

var listeAttributs:XMLList = new XMLListO; 

//© Rechercher les attributs de la balise Personne 

listeAttributs = donneesLues. .personne. attributesO; 

var 1 i steNom:Array = new ArrayO; 

var 1 i stePrenom: Array = new ArrayO; 

var listeDate:Array = new ArrayO; 

var listePersonne:Array = new ArrayO; 

//© Selon l'attribut, stocker la valeur 

// dans le tableau approprie 

for each (var eltrXML in listeAttributs) { 

if(elt.name() == "nom") listeNom. push(elt.toStringO); 

if(elt.name() == "prenom") listePrenom.push(elt.toStringO) ; 

if(elt.name() == "dateNai ssance" ) 1 i steDate.push(el t.toStringO) ; 

} 

//© Creer les personnes pour chaque element de la liste de nom 
for(var i:int=0; i < listeNom. length; i++) { 

listePersonne [i] = new Personned i stePrenom[i ] , 1 i steNom[i ] , listeDate[i]); 

listePersonne[i].x = 1 argeurPhoto*i 

+ (largeur - listeNom. length*largeurPhoto)/2; 

listePersonne[i].y = (hauteur -1 argeurPhoto) II; 

//On affiche les elements les uns en dessous des autres 

boite.addChi 1 dAtd istePersonne[i ] ,0) ; 

} 

} 

//© Si 1 'extraction echoue 
catch (e:TypeError) { 

traceOImposible de charger le XML"); 
tracete. message) ; 

} 

} 

La lecture du fichier XML et l'extraction des donnees s'effectuent au travers d'un outil 
de gestion d'erreurs. Cet outil est compose d'un bloc try (en francais essayer) et d'un 
bloc catch (en francais capturer). Les blocs sont executes de la facon suivante : 

O Si aucune erreur n'est transmise par les differentes instructions composant le bloc 
try, Taction est realisee a partir des instructions du bloc try. 

© Si une erreur est propagee par l'une des instructions du bloc try, les instructions pla- 
cees dans le bloc catch sont executees. Un message indiquant le type d'erreur detectee 
est affiche dans la fenetre de sortie. Le fichier XML n'est pas traite. 

© Les objets de type XML (donneesLues) et XMList (listeAttributs) sontcrees afin d'utili- 
ser les methodes d'extraction des donnees proposees par les concepteurs du langage 
ActionS cript. 
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L'integralite des donnees enregistrees dans le fichier listePersonnes.xml est placee 
dans l'objet donneesLues grace au parametre evt. target. data place en parametre du 
constructeur XMLO. L' extraction des donnees est ensuite realisee a partir du noeud 
<personne>, grace al'expression donneesLues . .personne. 



Remarque 

L'operateur double point (". .") estun outil tres pratique pour acceder a un nceud d'elementprofondement 
imbrique dans la hierarchie d'un arbre XML. II permet I'accession a un noeud en particulier, sans avoir a 
connaitre le chemin d'acces a ce noeud, ni son niveau d'imbrication. 



Sachant que la methode attrlbutesO appliquee a un objet de type XMList renvoie la 
liste des valeurs d'attributs associee a cet objet, nous obtenons ici la liste de tous les 
attributs des balises <personne>, sous la forme d'une liste d'elements XML. 

0 Le parcours de la liste des attributs est realise par l'intermediaire d'une boucle for... 
in. Ainsi, pour chaque element elt de la liste listeAttributs, les valeurs associees 
aux attributs sont enregistrees dans les tableaux appropries, grace a la serie de tests 
if. 

Le nom de l'attribut (nom, prenom ou dateNai ssance) est extrait de l'objet elt, par 
l'intermediaire de la methode nameO, alors que la valeur de l'attribut est extraite a 
l'aide de la methode toStringO. 

Selon le nom de l'attribut (nom, prenom ou dateNaissance) la valeur associee est enre- 
gistree dans le tableau approprie, 1 i steNom, 1 i stePrenom ou 1 i steDate respectivement. 

© Enfin, pour chaque element enregistre dans la liste de noms, le constructeur de la 
classe Personne est appele avec en parametres les donnees enregistrees dans les listes 
de nom, de prenom et de date de naissance. Les photos sont ensuite positionnees de 
facon a montrer les photos centrees horizontalement et verticalement. Elles sont 
ensuite affichees du niveau le plus bas vers le niveau le plus haut pour eviter de voir 
la bulle d' information cachee par la photo suivante. 

ds= Pour en savoir plus 

La classe Personne est definie au cours du chapitre 9 « Les principes du concept objet », section « Les 
objets controlent leur fonctionnement», paragraphe « Une personne se presente avec sa photo ». L'affi- 
chage des photos est egalement explique a la section « Afficher et positionner les personnes » du 
chapitre 9. 

Les niveaux de hierarchie 

Le fichier listePersonnes.xml decrit une liste de personnes a l'aide d'une arborescence 
tres simple : un nceud racine et une liste d'enfants possedant chacun ses caracteristiques 
propres (attributs). 

Les donnees utilisees par une application Flash sont en realite plus complexes que cela. 
Elles sont, le plus souvent, organisees dans une structure arborescente composee de 
nceuds et de sous-nceuds. 

Ainsi, par exemple, la mise en place d'un repertoire telephonique demande de definir une 
arborescence un peu plus complexe, ou chaque personne de la liste possede a son tour 
une liste d'objets - une ou plusieurs adresses, un ou plusieurs numeros de telephone. 
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Un repertoire telephonique 

Dans notre exemple, nous supposons que chaque personne est enregistree dans le reper- 
toire avec les numeros de telephone qu'elle possede. Le fichier XML (Repertoire.xml) 
definissant le repertoire telephonique se presente sous la forme suivante : 

<repertoi re> 

<personne nom="T." prenom="El ena" dateNaissance="16/04/1993"> 
<telephone type="domi ci 1 e" numero="01 02 03 04 05" /> 
<telephone type="portabl e" numero="06 02 03 04 05" /> 
</personne> 

<personne nom="C." prenom="Nicolas" dateNai ssance="10/07/1996"> 

<telephone type="domi ci 1 e" numero="01 11 12 13 14" /> 

<telephone type="portabl e" numero="06 11 12 13 14" /> 
</personne> 

<personne nom="Y." prenom="Margoline" dateNaissance="22/02/1974"> 
<telephone type="domi ci 1 e" numero="01 21 22 23 24" /> 
<telephone type="portable" numero="06 21 22 23 24" /> 
<telephone type="bureau" numero="01 11 22 33 44" /> 
</personne> 

<personne nom="R." prenom="Lamy" dateNai ssance="18/01/1970"> 

<telephone type="domicile" numero="01 31 32 33 34" /> 

<telephone type="portabl e" numero="06 31 32 33 34" /> 

<telephone type="bureau" numero="01 55 66 77 88" /> 

<telephone type="fax" numero="01 41 42 43 44" /> 
</personne> 
</repertoi re> 

Sous le nceud racine <repertoire> </repertoi re> sont definis quatre nceuds <personne> 
</personne> pour chacun desquels existe une liste de numeros de telephone telephone... /> 
(voir figure 10-11). 





Figure 10-11 

Arborescence XML des donnees enregistrees dans le fichier Repertoire.xml 



418 



Apprendre a programmer en ActionScript 3 



L'arbre XML est done constitue d'une premiere liste de noeuds (<personne> </personne> - 
figure 10-1 l-O), enfants du nceud racine (<repertoi re> </repertoi re>). Chaque noeud enfant 
est a son tour parent d'une liste de noeuds (<telephone> </telephone> - figure 10-11-©). 

L'acces a un element ou a une liste d'elements de l'arbre est realise en utilisant les notations 
suivantes : 

• Pour retrouver la liste des personnes du repertoire, il suffit d'utiliser l'expression : 
donneesLues. personne (voir figure 10-1 l-O). La propriete personne correspond a la 
balise <personne> du repertoire. L'objet donneesLues est l'objet XML dans lequel sont 
placees les informations lues depuis le fichier Repertoi re.xml . 

• Pour obtenir la liste des numeros de telephone de Margoline (voir figure 10-11-0), 
vous devez utiliser l'expression: donneesLues. personnel] .telephone. Margoline est 
definie en troisieme place, dans le repertoire. Elle se situe done a l'indice 2 de la 
propriete personne. 

• L'expression donneesLues. personne[0] .telephone[0] .©numero est utilisee pour obtenir 
le numero de telephone du domicile d' Elena (voir figure 10-11-©). Elena est definie en 
premiere place dans le repertoire, son numero de telephone domicile est egalement defini 
en premiere place, dans la liste des telephones. Les deux informations sont done toutes 
les deux definies a l'indice 0, des proprietes personne et telephone, respectivement. 



Remarque 

Notez l'expression @numero qui permet d'obtenir la valeur de I'attribut numero. L'operateur @ est utilise 
pour acceder a la valeur d'un attribut, en specifiant le nom de I'attribut immediatement apres I'arobase. 



Le nombre d'elements d'un niveau de hierarchie n'est pas directement accessible. Pour 
l'obtenir, nous devons le calculer en parcourant le niveau souhaite a l'aide d'une boucle 
for... in. 

La fonction cal cul erLongueur( ) suivante realise cette operation : 

function calculerLongueur(liste:XMLList):uint { 
var compteur:uint = 0; 
for each (var eltiXML in liste) { 
compteur++; 

} 

return compteur; 

} 

La longueur de la liste 1 i ste passee en parametre de la fonction est calculee en incremen- 
tant la variable locale compteur, lors du parcours de la liste a l'aide de la boucle for... in. 
Lorsque la liste est entierement parcourue, la valeur du compteur est retournee au 
programme appelant grace a 1' instruction return. 

Le parametre de la fonction correspond a la branche XML dont nous souhaitons calculer 
la longueur. L'acces a une branche en particulier s'obtient a l'aide de la methode 
elements?. ). En effet, cette methode a l'avantage de ne retourner que les noeuds enfants 
immediats d'un objet XML. Elle ne descend pas plus loin dans l'arborescence. Ainsi, 
pour calculer le nombre de numeros de telephone de Lamy, il suffit d'ecrire : 

var listeEnfant:XMLList = new XMLListO; 
listeEnfant = donneesLues. personne[3]. elements?); 
nbTelephone = cal cul erLongueurd i steEnfant) ; 



Le traitement de donnees multimedia 



Chapitre 10 



La methode elementsO appliquee a l'objet donneesLues. personne[3] retoume la liste des 
telephones de Lamy. La methode cal cul erLongueurt ) retourne done la valeur 4. 

Rechercherun element du repertoire 

La recherche d'un element particulier de la liste s'effectue soit : 

• En utilisant directement le chemin d'acces a 1' element. Nous devons alors connaitre 
exactement l'ordre d'enregistrement des elements dans l'arbre. Cette technique n'est 
pas realisable dans le cas d'une gestion dynamique de contenu. 

• En parcourant l'integralite de l'arbre et en testant les informations lues afin de trouver 
le renseignement recherche. 

Par exemple, pour obtenir la liste de tous les telephones portables du repertoire, la 
technique consiste a parcourir les listes de tous les telephones de toutes les personnes 
enregistrees dans le repertoire, arm d'en extraire les numeros dont le type est portable, 
comme le montre le jeu d' instructions suivant : 

function gestionXML(e:Event):void ( 
try { 

var nbPersonne:uint = 0; 
var nbTelephone:uint = 0; 

var nom, prenom, dateNaissance, type, numero: String; 
var unePersonne:Personne; 
var elt:XML; 

//Cree un objet XML et deux objets XMLList 
var donneesLues:XML = new XML(e. target. data) ; 
var listePersonneiXMLList = new XMLListO; 
var listeTelephoneiXMLList = new XMLListO; 
//Rechercher les enfants de la balise donneesLues 
1 istePersonne = donneesLues. elementsO; 
nbPersonne = cal cul erLongueurd istePersonne) ; 
//© Pour chaque personne de la liste 
for (var i:int=0; i < nbPersonne; i++) { 
//Recuperer le prenom 
prenom = donneesLues. personnel'], ©prenom; 
//Rechercher les enfants de la balise personne 
listeTelephone = donneesLues. personnel ] .elementsO ; 
nbTel ephone=cal cul erLongueurd isteTel ephone) ; 
//© Pour chaque telephone de la liste 
for (var j:int=0; j <nbTel ephone; j++) { 
//Afficher le prenom et le numero de telephone 
type = donneesLues. personne[i].telephone[j]. ©type; 
if (type == "portable" ) { 
numero = donneesLues. personne[1].telephone[j]. Onumero; 
trace( "Portabl e de " + prenom + " : " + numero); 

} 

} 

} 

} catch (e:TypeError) { 
traceC'Imposible de charger le XML"); 
tracete. message) ; 
} 

} 
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Le parcours de l'arbre est realise par une double boucle imbriquee (O et ©). La premiere 
parcourt la liste des personnes (listePersonne), la seconde, la liste des telephones 
(1 isteTelephone). La liste listePersonne contient la liste des enfants de donneesLues 
(listePersonne = donneesLues .el ements( )) et la liste listeTelephone contient celle des 
enfants de donneesLues . personne (1 i steTel ephone = donneesLues . personnel ] .el ements( )). 

Pour chaque telephone de chaque personne enregistree dans la l'arbre XML, le 
programme teste s'il existe un attribut dont la valeur correspond a portable (©). 
Dans ce cas, il affiche le prenom (donneesLues. personnel']. ©prenom) et le numero 
(donneesLues .personne [i ] . tel ephone[j] .©numero) de la personne correspondante. 



Remarque 

L'uti lisation des objets prenom, type, numero, 1 i stePersonne et 1 i steTel ephone (Vest pas obliga- 
toire. E lie a I'avantage de simplifier grandement I'ecriture etla comprehension du code. 



Au final, 1' application affiche dans la fenetre de sortie, les messages suivants : 



Portable de Elena : 06 02 03 04 05 

Portable de Nicolas : 06 11 12 13 14 

Portable de Margoline : 06 21 22 23 24 

Portable de Lamy : 06 31 32 33 34 

Memento 

Le son 

Limportation du son sous Flash est realisee par l'intermediaire de la classe Sound. 

//Creation d'un objet de type Sound 
var music:Sound = new SoundO; 

//Chargement du fichier LaMusique.mp3 dans 1 'objet music 
music.l oad(new URLRequestt "Sons/1 aMusic.mp3" ) ) ; 
//La musique est lancee 
music.pl ay( ) ; 

Le fichier LaMusique.mp3 est enregistre dans le repertoire Sons. 

La video 

L'importation d'une video sous Flash necessite que cette derniere soit codee au 
format . f 1 v. L'importation s'effectue par l'intermediaire des classes NetConnection, 
Net-Stream et d'un objet Video controle par ActionScript. 

//Creation d'un objet de type netConnection 

var seConnecter:NetConnection = new NetConnection( ) ; 

//La connexion est etablie localement 

seConnecter. connect (nul 1 ) ; 

//Creation d'un objet de type NetStream 

var unFl ux: NetStream = new NetStream(seConnecter) ; 
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//Le flux video est rattache a un ecran 

//Definir un support pour visualiser la video 

var ecran:Video = new VideoO; 

//Associer le flux a 1 'ecran 

ecran. attachNetStream(unFlux) ; 

//La video uneVideo.flv est lancee 

unFl ux. pi ay( "Videos/uneVideo.f 1 v" ) ; 

L'objet ecran sur lequel est attache le flux video est une occurrence de la classe Video. 
Le fichier uneVi deo . f 1 v est enregistre dans le repertoire Videos. 

Le texte 

Des valeurs associees a des noms de variables sont transmises au lecteur Flash par 
l'intermediaire de la classe URLLoader. 

//Creation d'un objet de type URLLoader 

var unelnfoiURLLoader = new URLLoaderO; 

une Info. 1 oad(new URLRequest( "Textes /Memento. txt" ) ; 

//Definition du gestionnaire Event. COMPLETE 

infosTexte.addEventListener(Event. COMPLETE, auChargement) ; 

function auChargement(e:Event):void { 

traceCLa valeur lue = " + URLLoader(e. target) .data) ; 

} 

Le fichier Memento.txt est enregistre dans le repertoire Textes au format UTF-8. II 
contient la ligne valeur=16. 

Le format XML 

Avec le format XML, les donnees sont structurees sous la forme d'un arbre compose 
d'une racine unique et de nceuds enfants. 

<memento> 

<enfant nom="Nicolas" /> 

<enfant nom="Elena" /> 
</memento> 

Le noeud <memento> </memento> est la racine de 1' arbre XML et <enfant> </enfant> sont les 
nceuds enfants de la racine. 

Des donnees enregistrees au format XML sont transmises au lecteur Flash grace a la 
classe URLLoader. Elles sont traitees par l'intermediaire de la classe XML. 

var listeElements:XMLList = new XMLListO; 

var donneesXMLLuesDansUnFichier:XML = new XMLO; 

1 isteElements = donneesXMLLuesDansUnFichier .el ementst ) ; 

for each (var elt:XML in 1 isteElements) ( 

//Afficher un element de la liste 
tracetelt.attributeCnom") ); 

} 

Le fichier Memento. xml est enregistre dans le repertoire XML avec le codage UTF-8. L'acces 
a un element ou a une liste d'elements de l'arbre est realise par l'intermediaire d'une 
boucle for... in. 
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Exercices 

Le lecteur MP3 version 2 

II s'agit ici d'ameliorer l'interface utilisateur du lecteur MP3 etudie dans ce chapitre (voir 
section « Le son », paragraphe « Un lecteur MP3 »). Le nouveau lecteur MP3 possede 
les fonctionnalites suivantes : 

• afficher le titre de la chanson ; 

• eteindre ou allumer le son ; 

• avancer au morceau suivant ; 

• retourner au morceau precedent ; 

• repeter la lecture. 

Ces fonctionnalites sont illustrees par une nouvelle interface se presentant de la facon 
suivante : 



Figure 10-12 

La nouvelle inter- 
face utilisateur du 
lecteur MP3 




Extension web 

Pour vous fa c iliter la tache, le fichier LecteurMp3V2.fla a partir duquel nous a lions trava iller, se trouve 
dans le repertoire Exercices/SupportPourRealiserLesExercices/ChapitrelO. Dans ce meme 
repertoire, vous pouvez acceder a I'application telle que nous souhaitons la voir fonctionner 
(LecteurMp3V2.swf) une fois realisee. 



Exercice 10.1 

1. Affichez, dans la zone de texte 1 abel In de l'objet control eur, le nom du fichier son lu. 

2. En utilisant le gestionnaire d'evenement onID3, affichez le titre de la chanson dans la 
zone de texte label In de l'objet control eur. 



Remarque 

Le titre d'une chanson est stocke dans la propriete id3.TlT2 de l'objet music. Cette propriete n'est pas 
toujours renseignee, c'est pourquoi nous affichons, tout d'abord, le nom du fichier lu. 



3. Par defaut, le clip sonOff est visible et sonOn invisible, ils sont places l'un en dessous 
de 1' autre. 
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- Lorsque l'utilisateur clique sur sonOff, celui-ci disparait pour laisser apparaitre 
sonOn et le son est coupe. 

- Lorsque l'utilisateur clique sur sonOn, celui-ci disparait pour laisser apparaitre 
sonOff et le volume sonore revient a la valeur qu'il avait avant d'etre coupe. 

Exercice 10.2 

1. Le lecteur MP3 lit une suite de titres, fournie par un fichier XML. 

• Creez un fichier 1 isteMusic.xml contenant la liste des morceaux de musique a ecouter. 
Les balises pourront etre definies comme suit : 

<titre nom="uneMusique.mp3"/> 

• Dans le script, chargez le fichier 1 isteMusic.xml et construisez un tableau (1 isteMusic[]) 
memorisant la liste des morceaux de musique. 

• Chargez ensuite le morceau de musique correspondant a l'indice 0 du tableau 1 i steMusic[]. 



Remarque 

Lorsqu'un fichier son est totalement charge etlu, il n'estplus possible de charger un nouveau fichier audio 
dans ce meme objet. Pour charger un nouveau son, creez un autre objet Sound dans le gestionnaire 
Event. S0UND_C0MPLETE, comme suit: 

function auSonl_u(e:Event) :void { 
music = new Sound( ) ; 

//Charger un nouveau morceau 

} 



2. Lorsque le morceau de musique courant arrive a sa fin, chargez le morceau suivant 
dans la liste. 

Exercice 10.3 

1. Lorsque l'utilisateur clique sur le bouton control eur.avancer : 

• L'indice du tableau 1 isteMusicf] est incremente de 1. 

• Le morceau de musique correspondant au nouvel indice est charge. 

• L'interface utilisateur est reinitialisee - l'utilisateur doit cliquer a nouveau sur le 
bouton control eur . 1 i re pour entendre le nouveau morceau. 

• Que doit-on faire lorsque l'indice du tableau listeMusicL] est plus grand que le 
nombre de morceaux de musique defini dans la liste ? 

2. Lorsque l'utilisateur clique sur le bouton control eur.reculer : 

• L'indice du tableau 1 isteMusicf] est decrements de 1. 

• Le morceau de musique correspondant au nouvel indice est charge. 

• L'interface utilisateur est reinitialisee - l'utilisateur doit cliquer a nouveau sur le 
bouton control eur . 1 i re pour entendre le nouveau morceau. 

• Que doit-on faire lorsque l'indice du tableau 1 isteMusicf] devient plus petit que 0 ? 
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Exercice 10.4 

Lorsque l'utilisateur clique sur le bouton control eur. conti nuer, le lecteur MP3 lit la liste 
des morceaux de musique en continu. 

• Le bouton control eur . conti nuer diminue de taille pour indiquer que l'option lecture en 
continu est selectionnee. Au clic suivant, le bouton revient a sa taille d'origine. 

• Un drapeau encore change d'etat (true ou false) a chaque fois que l'utilisateur clique 
sur le bouton control eur. conti nuer. 

• Dans le gestionnaire d'evenement Event. S0UND_C0MPLETE : 

- Lorsque l'indice du tableau 1 i steMusi c[] est plus grand que le nombre de morceaux 
de musique defini dans la liste, et que le drapeau encore vaut true, l'indice du 
tableau est reinitialise a 0. 

- La musique continue a jouer si l'indice du tableau est inferieur au nombre de 
morceaux de musique defini dans la liste. 

- Sinon la musique s'arrete et l'interface utilisateur est reinitialisee - l'utilisateur doit 
cliquer a nouveau sur le bouton control eur . 1 i re pour entendre le premier morceau 
de la liste. Que se passe-t-il lorsque l'utilisateur clique a nouveau sur le bouton 
lire ? Comment resoudre le probleme ? 

Le repertoire telephonique 
Exercice 10.5 

L'objectif de cet exercice est d'afficher les photos et la liste des numeros de telephone des 
personnes definies dans le fichier Repertoire.xml (voir section « Lire un fichier XML », 
paragraphe « Les niveaux de hierarchie ») comme le montre la figure 10-13 : 



1. Chargez le fichier Repertoire.xml et construisez un tableau (1 istePersonne[]) memo- 
risant la liste des personnes enregistrees dans le repertoire. 

2. Pour chaque element du tableau listePersonne[] : 

- Creez une personne a partir des donnees fournies par le fichier XML et afficher sa 



Figure 10-13 




Le repertoire 
telephonique 



photo. 
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- Listez les numeros de telephone de chaque personne et affichez-les en utilisant un 
format d'ecriture et une zone de texte creee a la volee. 

- Positionnez la zone de texte directement sous la photo. 



Remarque 

Pour afficher la liste des numeros de telephone, reprendre le code de la methode afficherTexteO 
presente a la section « Le texte », paragraphe « Creer une zone de texte » de ce chapitre. 



Le projet mini site 

Pour finir ce projet, nous utilisons toutes les techniques etudiees au cours de ce chapitre. 
Les transformations a apporter sont les suivantes : 

• Les rubriques Photos, Animes, Videos et Infos sont creees a partir de donnees lues dans 
un fichier ressource au format XML. 

• Les pages Photos, Animes et Videos presentent une serie de vignettes sur la partie 
gauche de la page. Lorsque l'internaute clique sur l'une d'entre elles, une photo, une 
animation ou un lecteur video apparait en grand format sur la partie droite de la page. 

• Lorsque le curseur de la souris survole une vignette des pages Photos, Animes et 
Videos, une infobulle apparait. Ses informations contenues sont extraites d'un fichier 
texte. 

• Les videos sont integrees a l'interieur d'une interface utilisateur definie au sein d'une 
classe elaboree a cet effet. 

• La page Infos differe des autres pages. Elle ne contient pas de vignettes, mais uniquement 
des informations textuelles. Ces informations sont extraites d'un fichier XML. 



Sur le CD-Rom 

Pourvous faciliter la tache, le fichier ProjetChapitrelO.fi a a partir duquel nous allons travailler, se 
trouve dans le repertoire Projet/SupportPourRealiserLeProjet/ChapitrelO du CD-Rom livre 
avec I'ouvrage. Dans ce meme repertoire, vous pouvez acceder a Papplication telle que nous souhaitons 
la voirfonctionner(ProjetChapitrelO.swf) une fois realisee. 



Creer le mini site avec XML 

Les rubriques Photos, Animes, Videos et Infos sont creees a partir de donnees lues dans 
un fichier ressource au format XML, nomme Ressources .xml . 

Le fichier Ressources .xml definit les elements a afficher pour chaque page du site. Pour 
creer le site a partir du fichier ressource, vous devez : 

• Definir la liste des nceuds du fichier Ressources. xml sachant que chaque rubrique est 
definie par un nceud ayant pour attribut le nom de l'en-tete, la couleur en hexadecimal 
et un nombre correspondant au nombre de vignettes pour les pages Photos, Animes et 
Videos. Pour la page Infos, le nombre de vignettes est nul. 

• Dans l'application ProjetChapitrelO.fi a, charger le fichier Ressource. xml et enregistrer 
l'arbre XML pour le passer ensuite en parametre du constructeur de la classe Mini Si te. 
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• En vous inspirant de l'exemple presente en section « Un repertoire telephonique » de 
ce chapitre, modifier le constructeur de la classe Mi ni Si te de sorte qu'il mette a jour les 
proprietes 1 i steCoul eurs, noms et nbEl t, a partir des valeurs extraites de l'arbre XML. 



Remarque 

Les proprietes 1 isteCouleurs, noms et nbEl t ne sont plus initia Usees lors de leur declaration. 



Executer 1' animation et verifier que les 4 rubriques s'affichent correctement. 

Charger le contenu multimedia 

Chaque page possede son propre contenu. Les contenus des pages Photos, Animes et 
Videos sont assez similaires. lis presentent tous trois un cote gauche avec des vignettes et 
un cote droit avec une zone de visualisation grand format. Pour toutes ces raisons, nous 
choisissons d'ecrire une classe specialisee dans le chargement de contenus multimedia. 
Cette classe est nommee ChargeurPhotoAnimeVideo. 

Le chargeur de contenu multimedia est appele lorsque la page s'affiche. II se cree a l'aide 
des instuctions suivantes : 

switch (titre. contenu) { 
case "Photos" : 
case "Animes" : 
case "Videos" : 

chargeurMmedia= new ChargeurPhotoAnimeVideo(titre. contenu, cible.nombreElt); 
break; 

} 

Ces instructions sont placees dans le constructeur de la classe Page. Le chargeur n'est 
place dans la liste d'affichage qu'une fois la page totalement affichee en utilisant la 
methode addChildO. Lobjet chargeurMmedia est declare comme objet static de la classe 
Page. 

La classe ChargeurPhotoAnimeVideo 

La classe ChargeurPhotoAnimeVideo s'occupe de presenter le contenu multimedia sous 
forme de vignettes interactives. Elle possede trois proprietes qui vont nous permettre de 
stacker : 

• le type du contenu a charger (typeContenu) ; 

• l'element a visualiser en grand format (grandFormat) ; 

• l'infobulle (bul 1 elnfo). 

Le constructeur de la classe ChargeurPhotoAnimeVideo realise les actions suivantes : 

• initialiser la propriete typeContenu a la valeur qui lui est passee en parametre ; 

• afficher les vignettes associees au theme de la page ; 

• creer, sans l'afficher, l'objet bul 1 elnfo a partir du symbole InfoBul 1 eCl p place dans la 
bibliotheque de 1' application. Ce clip contient un champs de texte dynamique nomme 
labelOut. 
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Les vignettes 

L'affichage des vignettes utilise la methode afficheVignettes( ) presentee au chapitre 7, 
section « Le projet mini site » 

Survoler une vignette 

Lorsque le curseur de la souris survole une vignette, une infobulle apparait. Le texte affi- 
che est charge depuis un fichier texte nomme Inf0s7.txt, ou f correspond au numero de 
la vignette survolee. Le fichier texte se trouve dans le repertoire correspondant au nom 
de la page affichee. 

La mise en place du chargement du contenu textuel et son affichage dans 1' infobulle 
s'effectue en trois temps : 

• Charger le fichier Inf0s7.txt dans le gestionnaire surOverO. 

• Lorsque le contenu textuel a fini d'etre charge, placer ce dernier dans la zone de texte 
dynamique nominee label Out. 

• Afficher l'infobulle un peu en dessous du curseur de la souris. 

Lorsque le curseur de la souris sort de la vignette, 1'infobulle devient invisible. 

Cliquer sur une vignette 

Lorsque l'internaute clique sur une vignette, son contenu est charge puis affiche. L' action 
a mener suite a un clic sur vignette est nominee surUp( ). 

Selon le type de contenu, la methode sur Up ( ) realise les actions suivantes : 

• construire le chemin d'acces au fichier a charger en ajoutant a la fin, l'extension . jpg, 
.swf ou . f 1 v. 

• appeler la methode charger Phot oOuAnim( ) ou chargerVideo( ), en passant en parametre le 
nom de la page, la position de la souris lors du clic et une position se situant a droite de 
la page. 

Charger les photos ou les animations 

Le chargement d'une photo ou d'une animation est realisee par la methode 
chargerPhotoOuAnim( ). Cette methode possede cinq parametres. 

• Le premier correspond au chemin d'acces au fichier a charger. Ce parametre est utilise 
par la methode load( ) du chargeur (type Loader) afin de charger la photo ou l'anima- 
tion. Le chargeur est cree et insere dans la liste d'affichage du clip grandFormat, comme 
suit : 

var aCharger: Loader=new LoaderO; 
aCharger. load (new URLRequestturl ) ) ; 
grandFormat=new MovieClipO; 
grandFormat. addCh i 1 d ( aCharger) ; 

• Les quatres parametres suivants sont utilises pour deplacer le contenu grandFormat lors 
de son affichage. Les deux premiers parametres correspondent au point de depart du 
deplacement, les deux derniers au point d'arrivee. 

Le deplacement du contenu est realise par la methode seDeplacerVersO, identique a 
celle utilisee par la classe Rubrique. 
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• Les positions finales sont enregistrees dans les proprietes final X et final Y que vous 
aurez pris soin d'ajouter a l'objet grandFormat. Ces proprietes sont ensuite utilisees par 
la methode seDeplacerVers( ). 

Charger une video 

Le chargement d'une video est realise par la methode chargerVideo( ). La methode est 
pratiquement identique a la la mehode chargerPhotoOuAnimO, seul le support de charge- 
ment differe. Au lieu d'employer un objet de type Loader, nous utilisons un objet de type 
LecteurVideo. 



Remarque 

Vous trouverez la classe LecteurVideo dans le repertoire Projet/SupportPourReal i serLeProjet/ 
Chapitreio. Cette classe reprend le code du lecteur video etudie au cours de ce chapitre en section 
« Un lecteur de video ». Pour eviter une erreurde compilation, vous devez insererle clip Control eurClp 
dans la bibliotheque de I'application projetChapitrelO.fi a. 



Le lecteur est cree en ecrivant : 

grandFormat = new MovieClipO; 
MiniSite.laVideo = new LecteurVideo(url ) ; 
grandFormat. addChi 1 d ( Mini Si te. la Video) ; 

L'URL passee en parametre du constructeur LecteurVideo indique le chemin d'acces au 
fichier video de format . f 1 v. 

Une fois cree, le lecteur video est insere dans la liste d'afiichage du clip grandFormat. Ce 
dernier est ensuite affiche avec la meme technique que pour les photos ou les animations. 
Les coordonnees de debut et de fin de deplacement sont initialisees a l'aide des valeurs 
transmises en parametres de la fonction chargerVideo( ). 

Arreter une video 

II convient d' arreter la lecture d'une video : 

• Si Ton clique a nouveau sur vignette de la page Videos. Dans ce cas, le lecteur doit etre 
reinitialise et supprime de la liste d'affichage, comme suit : 

if (MiniSite.laVideo != null ) { 
Mi ni Si te . 1 aVi deo . remi seAZero( ) ; 
grandFormat. removeChi Id (MiniSite.laVideo) ; 

} 

• Lorque l'internaute clique sur le titre ou une mini rubrique. Dans cette situation, le flux 
video doit etre arrete. Cette action est realisee en fermant directement le flux defini au 
sein de la classe LecteurVideo, comme suit : 

if (LecteurVideo. unFlux != null) { 
LecteurVi deo. un Flux. closet ) 



Charger le contenu textuel 



La page Infos differe des autres pages du site. Elle ne contient pas de vignettes, mais des 
informations textuelles eventuellement cliquables. 
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Structure du contenu textuel 

L' information contenue dans la page Infos est enregistree dans un fichier XML dont la 
structure est la suivante : 

<projet> 

<info type="lien" titre="un lien : " contenu="http://www.unsite.fr"/> 
<info type="texte" titre="une info non cliquable : " contenu="Bonjour !!!"/> 
<info type="mail" titre="Envoyer un courrier :" contenu="nom@unSite.fr"/> 
</projet> 

L'attribut type indique si les informations stockees dans l'attribut contenu sont : 

• un lien cliquable qui ouvre : 

- soit le navigateur pour afficher la page relative au lien defini par l'attribut contenu. 
L'attribut type vaut 1 i en. 

- soit le logiciel de messagerie de l'utilisateur pour que ce dernier puisse envoyer un 
message a l'adresse indiquee par l'attribut contenu. L'attribut type vaut mai 1 . 

• Un simple texte presentant une information specifique. 

Le chargement et l'affichage des informations contenues dans le fichier Infos.xml sont 
realises par la classe Chargeurlnfo. 

La classe Chargeurlnfo 

Le constructeur de la classe Chargeurlnfo : 

• Construit le chemin d'acces au fichier Infos .xml , a partir du nom de la page passe en 
parametre du constructeur. 

• Ouvre et charge le fichier Infos .xml . 

• Lorsque le fichier est totalement charge, la methode gestionInfo( ) est appelee. 
La methode gestionlnfo() 

La methode gestionInfo( ) parcourt l'arbre XML et traite chaque attribut des balises info 
de la facon suivante : 

• Si l'attribut type vaut "texte" alors deux objets de type Ti treTexte sont crees afin d'affi- 
cher horizontalement le titre et le contenu en noir. La couleur de la puce placee a 
gauche du texte, est initialisee a une couleur rouge. 

• Si l'attribut type vaut "1 i en" alors deux objets de type TitreTexte sont crees afin d'affi- 
cher horizontalement le titre en noir puis le contenu en bleu. La couleur de la puce 
placee a gauche du texte, est initialisee a la meme couleur bleue. 

L'objet associe au contenu ecoute l'evenement MouseEvent.MOUSE_UP, Taction a mener 
est cl i cSurl_ien( ). 

• Si l'attribut type vaut "mai 1 " alors deux objets de type Ti treTexte sont crees afin d'affi- 
cher horizontalement le titre en noir puis, le contenu en bleu turquoise. La couleur de 
la puce placee a gauche du texte est initialisee a une couleur bleu turquoise. 

L'objet associe au contenu ecoute l'evenement MouseEvent.MOUSEJJP, Taction a mener 
est cl i cSurMai 1 ( ). 
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• Les puces sont creees, coloriees et placees en debut de chaque ligne, en utilissant le 
constructeur de la classe Forme. 



Remarque 

Lorsque le curseur de la souris passe sur un lien cliquable, la forme du curseur doit se transformer en 
main. Modifiez la classe TitreTexte de facon a creer un fond pour les textes horizontaux. Ajouter un 
nouveau parametre de type booleen a la fonction dessinerHorizontal ( ) qui precisera si le curseur 
change de forme ou non suivantsa valeur. 



Cliquer sur un lien 

Lorsque l'intemaute clique sur un lien, deux actions sont possibles : 

• L'action clicSurLienO dont la structure est la suivante : 

private function cl icSurl_ien(e:MouseEvent) { 

//Recuperer 1'objet sur lequel on a clique 
var cible:TitreTexte = e.currentTarget as TitreTexte; 
//Construire l'URL a partir du contenu associe a la cible 
var request:URLRequest = new URLRequest(cible. contenu) ; 
try { 

//Ouvre une fenetre du navigateur a l'URL indiquee en parametre 
navigateToURK request) ; 
} catch (e:Error) { 

//Traitement des erreurs 

} 

) 

• L'action cl i cSurMai 1 ( ) dont la structure est la suivante : 

private function cl icSurMai 1 (e:MouseEvent) { 

//Recuperer 1'objet sur lequel on a clique 

var cible:TitreTexte = e.currentTarget as TitreTexte; 

try { 

//Construire 1'adresse e-mail a partir du contenu associe a la cible 
var quel Mail : Stri ng = "mailto:"+cible. contenu + 

"?subject=Une question en AS3&body=Bonjour, " ; 
//Ouvre une fenetre de messagerie a 1'adresse e-mail indiquee en parametre 
navigateToURK new URLRequesttquelMai 1 ) , "_bl ank" ) ; 
} catch (e:Error) { 
//Traitement des erreurs 

} 

} 

Afficher la page Infos 

Le chargeur de contenu textuel est appele lorsque la page est en cours de creation a l'aide 
des instuctions suivantes : 

switch (titre. contenu) { 
case "Infos" : 

chargeurXML= new Chargeurlnfottitre. contenu ) ; 

addChild(chargeurXML) ; 
break; 
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case "Photos" : 
case "Animes" : 
case "Videos" : 

//Charger les contenus multimedia 
break; 

} 

Ces instructions sont placees dans le constructeur de la classe Page. Le chargeur n'est 
place dans la liste d'affichage qu'une fois la page totalement affichee en utilisant la 
methode addChildO. Tout comme l'objet chargeurMmedia, l'objet chargeurXML est declare 
comme objet static de la classe Page. 

Pour effacer les contenus multimedia ou textuel au chargement d'une nouvelle page, les 
objets voient leur propriete visible mise a false, s'ils ne sont pas null, avant d'etre a 
nouveau affiches. 
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tableau 222 

2 dimensions 225 

element 222, 224 

indice 222, 226 

ligne et colonne 227 

longueur 222 

nomme 230, 249 

taille 228 
texte 

de saisie 99, 245 

dynamique 100, 114, 245 

importation 400 
TextField 89, 402 
timeline 24, 61 

toStringO 239, 242, 292, 312, 413 
toUpperCaseO 292 
totalFrames 81, 83, 191 
trace() 33, 42, 44, 104 
try/catch415 
type 35,42,315 

Boolean 35 

conversion 42 

de donnees 8 

Number 33 

objet311, 321 

simple 311 

String 35 

structure 317 

Video 395 

U 

uint 35 

UIScrollBar 403 
undefined 233 
unite centrale 6, 27 
unshift() 231, 234 
URLLoader 404 

dataFormat 407 
URLRequest 196 

V 

variable 

d'instance 322, 340, 341 
de classe 280, 340, 341 
declaration 33, 221, 275 
definition 32 
drapeau 160, 256 
globale 278 
invisible 276 
locale 276, 277, 280 
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variable (suite) 
nom 32 
public 372 
static 372 

tableau d' evolution 186, 277, 
279 
Video 395 

a la volee 396 

codage 392 
visibilite 274 
visible 79 
vitesse 120, 121 
void 287, 300 
volume 388 
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while 183 
choisir 206 
exemple 185 
syntaxe 183 

width 80 



x79, 91, 198 
XML 

arbre412, 418, 420 

attribut412 

balise411 



XML (suite) 

classe 412 

element()413,419 

Event.COMPLETE 414 

nameQ 416 

noeud 41 1,417 

toStringO 416 

try/catch415 
XMLList 

attributes()416 



y 79, 91, 201 



Anne Tasso 

Maitre de conferences a I'unlversite de Marne-la-Vallee, Anne Tasso enseigne les langages 
ActionScript et Java, en formation initiale et continue, au sein du departement SRC (Services et 
reseaux de communication) de NUT de Marne-la-Vallee. 



Apprendre I'ActionScript 3 en douceur 

Tout particulierement destine aux etudiants et aux debutants, cet ouvrage complet et pratique permet d'acque- 
rir toutes les notions indispensables pour programmer en ActionScript, le langage de I'environnement Flash. 
Pour permettre au lecteur de mettre en oeuvre ses connaissances, chaque chapitre se clot par une serie d'exer- 
cices, dont les fichiers sources et les corriges figurent sur I'extension Web du livre. Le lecteur pourra egalement 
construire au fil des chapitres un mini site internet : conception de rubriques animees, mise en place d'une navi- 
gation ergonomique, integration dynamique de textes, photos et videos. 

A qui s'adresse ce livre ? 

• A ceux qui souhaitant apprendre a programmer proprement des applications Flash en les rendant plus dyna- 
miques et interactives 

• Aux graphistes ayant une bonne connaissance de I'environnement Flash mais ne maTtrisant pas les concepts 
de programmation 

Au sommaire 

A la source d'un programme • Construire un algorithme • Passer de I'algorithme au programme • Qu'est-ce qu'un 
programme sous Flash ? • L'environnement de programmation Flash • Traiter les donnees • La notion de variable • 
Calculs et operateurs arithmetiques • Plus de precisions sur I'affichage • Les symboles • Les differents types • Creer un 
objet a partir d'un symbole • Proprietes et methodes d'un objet • Gestion de la liste d'affichage • Communiquer ou 
interagir • Les differents modes de communication • Gestion des evenements • Techniques de programmation incontour- 
nables • Faire des choix • L'instruction if-else • L'instruction switch, ou comment faire des choix multiples • Les repe- 
titions • La boucle while • La boucle do... while • La boucle for • Quelle boucle choisir ? • La boucle interne a Flash • 
Collectionner des objets • Les tableaux • Les fonctions • Algorithme parametre • Utilisation des fonctions natives 

• Construire ses propres fonctions • Influence de la structure d'un script sur son comportement • Les fonctions communi- 
quent • Une palette de couleurs • Les classes et les objets • La classe Date, une approche de la notion d'objet • 
Construire et utiliser ses propres classes • Les principes du concept objet • Le traitement de proprietes d'une classe 

• Les objets controlent leur fonctionnement • Le traitement de donnees multimedias • Le son • La video • Le texte 

• XML, ou comment organiser ses donnees. 

Sur le site editions-eyrolles.com 

• Telechargez le code source des exemples et consultez les corriges commentes des exercices et du mini-site 

• Dialoguez avec I'auteur 
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